jQuery - Slider Example

In order to use jQuery UI tools, you will need to include the jQuery js and css files.

http://jqueryui.com/slider

Example 1 - Simple Slider

 

Example 2 - Handle with value

 

Example 3 - Simple Slider with Min, Max, Steps, a Preset Default Value, and a Label

 

// example 1
$(function () { $("#jq-slider1").slider(); });

// example 2
$(function ()
{
    var handle = $("#custom-handle");

    $("#slider2").slider({
        create: function ()
        {
            handle.text($(this).slider("value"));
        },
        slide: function (event, ui)
        {
            handle.text(ui.value);
        }
    });
});

// example 3
$(function ()
{
    $("#slider3").slider({
        range: "max",
        min: 0,
        max: 1000,
        value: 100,
        step: 50,
        slide: function (event, ui) {
            $("#txtAmount").val(ui.value);
        }
    });
    $("#txtAmount").val($("#slider3").slider("value"));
});