simplicitySlider

Handles are a drag.

A $.ui.slider that is bound to one (or two) inputs. Best used when you have a large number of choices or the $.simplicitySelectSlider doesn't meet your needs.

Create an input to hold the selection and a target div for the slider.

<div id="example">
    <input name="example" />
    <div></div>
</div>

Then apply the simplicitySelectSlider widget to it.

$('#example div').simplicitySlider({
    input: '#example input',
    min: 0,
    max: 100,
    any: 0
});

Example

Change the value in 1 and see how the slider in 2 is updated.

Move the slider in 2 and see how the value in 1 is updated.

Create two inputs to hold the selection and a target div for the slider.

<div id="example">
    <input name="min" />
    <input name="max" />
    <div></div>
</div>

Then apply the simplicitySlider widget to them.

$('#example div').simplicitySelectSlider({
    input:  ['#example input[name="min"]', '#example input[name="max"]'],
    min: 0,
    max: 100,
    values: [0, 100],
    any: [0, 100],
    range: true
});

Example

Change the values in 1 or 2 and see how the slider in 3 is updated.

Move the slider in 3 and see how the values in 1 and 2 are updated.