In this example, 4 text input fields with their values set to "25" are created inside a table with the sliders-default identifier. The following code is then called:
$('#sliders-default').boundSliders();
In this example, 10 text input fields with their values set to "10" are created inside a table with the sliders-custom identifier. The following code is then called:
$('#sliders-custom').boundSliders({
'totalValue': 90 ,
'bigIncrement': 10 ,
'buttons': [ '/img/jqbs-demo/slider-up.png' ,
'/img/jqbs-demo/slider-down.png' ,
'/img/jqbs-demo/slider-upup.png',
'/img/jqbs-demo/slider-downdown.png' ] ,
'lock': [ '/img/jqbs-demo/locked.png' , '/img/jqbs-demo/unlocked.png' ] ,
'buttonsLocation': 'after'
});
Since the total value set for the bound sliders is different from the sum of all values found in the HTML code, the values are reset.
This example pretty much uses the defaults, with the exception of the jquerySliders option which is enabled:
$('#sliders-jqui').boundSliders({
'jquerySliders': true
});
In this example, two sets of sliders are initialised simultaneously using default values. Both sets are contained inside tables that have the multiple-sliders class.
$('.multiple-sliders').boundSliders();