slider ranges

by Akram kamal

HTML

<div class="slider"></div>
<div class="values"></div>

CSS

.slider {
    background: #333;
    height: 40px;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 0.9em;
    height: 1.6em;
    cursor: default;
    outline: none;
    border: 1px solid rgb(207, 207, 207);
    background: #090;
    border-image: initial;
}

JavaScript

$(function() {
    $('div.slider').slider({
        range: true,
        step: 250,
        min: 1000,
        max: 500000,
        values: [1000, 300000],
        change: function(event, ui) {
            $('.values').text(ui.values[0] + ',' + ui.values[1]);
        },
        slide: function(event, ui) {
            $('.values').text(ui.values[0] + ',' + ui.values[1]);
        }
    });
});