(preload) (preload)

Default options

Set-up

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();

Results

Custom options

Set-up

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.

Results

JQuery UI sliders

Set-up

This example pretty much uses the defaults, with the exception of the jquerySliders option which is enabled:

$('#sliders-jqui').boundSliders({
	'jquerySliders':	true
});

Results

Multiple sliders in one call

Set-up

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();

Results