1) Default Using - top

• Example 1.1

  HTML

  <div id="rating-1"></div>
  

  JavaScript

  $('#rating-11').slidy();
  

  Result

2) Custom parameter - top

• Example 2.1

  HTML

  <div id="rating-21"></div>
  <div id="result-21"></div>
  

  JavaScript

  $('#rating-21').slidy({
  	maxval: 24, interval: 1, defaultValue: 8, 
  	finishedCallback: function (value) {
  		$('#result-21').html('You selected: ' + value);
  	}
  });
  

  Result

• Example 2.2

  HTML

  <div id="rating-22"></div>
  <div id="result-22"></div>
  <div id="currentval-22"></div>
  

  JavaScript

  $('#rating-22').slidy({
  	maxval: 12, interval: 1, defaultValue: 4, 
  	finishedCallback: function (value) {
  		$('#result-22').html('You selected: ' + value);
  	},
  	moveCallback: function (value) {
  		$('#currentval-22').html('<strong>' + value + '</strong>');
  	}
  });
  			

  Result

3) Custom theme - top

• Example 3.1

  HTML

  <div id="rating-31"></div>
  <div id="result-31"></div>
  

  JavaScript

  $('#rating-31').slidy({
  	theme: {
  		image: 'themes/red.png',
  		width: 161,
  		height: 34
  	},
  	maxval: 10,
  	interval: 1,
  	defaultValue: 1,
  	finishedCallback: function (value) {
  		$('#result-31').html('You selected ' + value);
  	}
  });
  

  Result

• Example 3.2

  Apply slidy on many elements! In this case, we apply slidy to all element with class "rating-32"

  HTML

  <div class="rating-32"></div>
  <div class="rating-32"></div>
  

  JavaScript

  $('.rating-32').slidy({
  	theme: {
  		image: 'themes/red.png',
  		width: 161,
  		height: 34
  	},
  	maxval: 10,
  	interval: 1,
  	defaultValue: 1,
  	finishedCallback: function (value) {
  		$('#currentval-32').html('You selected ' + value + '')
  	},
  	moveCallback: function (value) {
  		$('#currentval-32').html('<strong>' + value + '</strong>')
  	}
  });
  

  Result

  First one

  Second One