jQuery UI Range Slider with arrows

by Santosh Thakur

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<h4> Width</h4>

<div data-max="100" data-min="0" class="slider"></div>
<input type="text" class="center amount">

CSS

#slider-range, #slider-range2 {
    width:300px;
    margin-top:10px;
}
body {
    margin: 15px;
}
#slider-range2.ui-slider-horizontal {
    border: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-range, #slider-range2.ui-slider-horizontal .ui-slider-handle {
    background: url("http://unbug.ru/examples/jquery/slider/slide.png") repeat scroll 0 0 transparent;
}
#slider-range2.ui-slider-horizontal .ui-slider-range {
    background-position: 0 -42px;
    background-repeat: repeat-x;
    height: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle {
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 0 none;
    height: 21px;
    top: 0;
    width: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle:focus {
    outline: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle + .ui-slider-handle {
    background-position: -21px 0;
}

JavaScript

$(document).ready(function () {
    $(".slider").each(function () {
        var $key = $(this).prev('h4').text(),
            datamax = $(this).data('max'),
            datamin = $(this).data('min'),
            amount = $(this).next('.amount'),
            values = [datamin, datamax];
        if (localStorage[$key]) {
            try {
                values = JSON.parse(localStorage[$key])
            } catch (e) {
                console.log(e)
            }
        }
        $(this).slider({
            range: true,
            min: 0,
            max: datamax,
            values: values,
            slide: function (event, ui) {
                amount.val(ui.values.join(" - ") + " mm");
            },
            stop: function (event, ui) {
                localStorage[$key] = JSON.stringify(ui.values);
            }
        });

        amount.val($(this).slider("values", 0) + " - " + $(this).slider("values", 1) + " mm");
    });
});