simplicitySelectSlider

Handles are a drag.

A $.ui.slider that is bound to one (or two) select inputs. Best used when you have a reasonable number of discrete choices and want to enable easy mapping between their value and label.

Create a select with the options you wish to allow and a target div for the slider.

<div id="example">
    <select name="example">
        <option value="">Any</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
        <option value="d">D</option>
        <option value="e">E<option>
    </select>
    <div></div>
</div>

Then apply the simplicitySelectSlider widget to it.

$('#example div').simplicitySelectSlider({
    select: '#example select'
});

Example

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

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

Create two selects with the options you wish to allow and a target div for the slider.

<div id="example">
    <select name="min">
        <option value="">Any</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
        <option value="d">D</option>
        <option value="e">E<option>
        <option value="f">F</option>
        <option value="g">G</option>
    </select>
    <select name="max">
        <option value="">Any</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
        <option value="d">D</option>
        <option value="e">E<option>
        <option value="f">F</option>
        <option value="g">G</option>
    </select>
    <div></div>
</div>

Then apply the simplicitySelectSlider widget to them.

$('#example div').simplicitySelectSlider({
    select:  '#example select[name="min"]',
    secondSelect: '#example select[name="max"]']
});

Example

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

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

There are a few different options to control the look and feel of the slider.

Additionally, for just the dual-handled slider.