The jQuery UI .slider() widget allows you to have sliders on your website.

The jQuery UI .slider() can return values to be used for manipulating other elements on your page. For example, you can change the size of an image.

 

Required jQuery files

To use the jQuery UI .slider function, you must include a link to the jQuery UI file in addition to the jQuery core file in the <head>...<.head> section of your document.

<script src="https:/ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

See these pages for complete documentation:

http://jqueryui.com/slider

http://api.jqueryui.com/slider

 

The script to use the .slider() widget

The basic script for using .slider()

$(function() {
    $( "#slider" ).slider();
});

In order to do things with the slider widget, you add arguments such as:

range: sets if the slider will have a range. this can be true or false or it can have a string value attached.

value: sets the initial value for the slider for the first handle

values: sets the initial values for multiple handles

max: sets the maximum numerical value

min: sets the minimum numerical value

orientation: the default is "horizontal", but it can be set to "vertical"

step: you can have stepped values for the slider such as "10"

slide (function(){...}); you can have a function tied to when the slider is moved

Here is an example of the jQuery .slider() function with arguments for making some other element respond to the slider being moved. This is the script for the image enlargement shown at the top of this article.

$( "#slider-range-max" ).slider({
    range: "max",
    min: 0,
    max: 200,
    value: 100,
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        var boxSize = $( "#slider-range-max" ).slider("value");
        $("#box").css({"width":$( "#slider-range-max" ).slider("value"),
        "height":$("#slider-range-max").slider("value")});
    }
});