Demo of Slider with additional attributes with data-*

While moving the pointer, extra attributes will be displayed ( connected to start event ). Same will be changed at stop event.

HTML

<div id="slider" data-name=my_name data-group=abc data-qty=yes value=35></div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
  $( "#slider" ).slider({
     slide: function( event, ui ) {

	  var str=$('#slider').data('name');
        $( "#d1" ).html( ui.value);
     },
	 start: function( event, ui ) {
            var str = " name="+$(this).data('name');
		    str +=", group="+$(this).data('group'); 
			str +=", qty="+$(this).data('qty'); 
		$( "#d2" ).html(str);
            },
     stop: function( event, ui ) {
        $( "#d2" ).html('Stopped ..'+ui.value );
            }
 });
////////////////
})
</script>