Slide entire jQuery slider range

Question

I have a multi-value jQuery slider with a defined step (it is defined by another slider, lets pretend for example's sake that it is a step:15) and a range of say 0-600. I want users to be able to drag the two values to the left and right like usual. But if a click is performed inside of the two values, they should be able to drag the whole range left and right.

A user is forced to set values like the following:

0,600
15,120
240,255
150,150

When, I want a user to be able to set values like the following:

1,271
15,165
25,115
580,595

These numbers still follow the step:15 rule of the slider, but can't be accessed with the basics of a jQuery slider because it wants to snap values to 30 increments (0,15,30,..,585,600). The most intuitive way I can think of this to be done is letting a user drag their 'range' of values left and right. But when the slider is clicked in between the two values, jQuery sets this as a new value.

I have used the slider's start event to detect if a user is clicking within the range (instead of clicking on a handle or the un-selected portion of the slider). I then need to set some sort of slide function within the slider that constantly detects the mouse position and slides left and right like that. I am at an intermediate level of Javascript (in my opinion) and not quite sure how I would go about doing that. You can play with my JSFiddle: http://jsfiddle.net/JhKxh/9/

*note: the only problem with my JSFiddle is if you click the slider's border, it doesn't count as the class ui-slider-range (but some CSS tweaking should be able to fix this).

Answer 1

your answer should be here

Drag the Range of a UI Input Range Slider

Answer 2

Look here:

http://docs.jquery.com/UI/API/1.8/Slider

The following code works well and is an extension of your original jsfiddle. I finally understood what you wanted and it seems to work fine now:

Live Working Code Sample

JavaScript:

$(document).ready(function () {
    'use strict';

    var stepSlider = $('#stepSlider');
    var stepText = $('#stepText');
    var rangeSlider = $('#rangeSlider');
    var rangeText = $('#rangeText');
    var oldStep;

    stepSlider.slider({
        min:0,
        max:120,
        slide:function (event, ui) {
            stepText.text(ui.value);

            var rsValues = rangeSlider.slider("option", "values");
            var stepDiff = ui.value - oldStep;
            var rsMax = rangeSlider.slider("option", "max");
            var rsMin = rangeSlider.slider("option", "min");
            if (stepDiff > 0) {
                rsValues[1] += stepDiff;
                if (rsValues[1] > rsMax) {
                    rsValues[0] = rsMax - ui.value;
                    rsValues[1] = rsMax;
                }
            } else if (stepDiff < 0) {
                rsValues[1] += stepDiff;
                if (rsValues[1] < rsMin) {
                    rsValues[0] = rsMin;
                    rsValues[1] = ui.value;
                }
            }
            rangeSlider.slider("option", "values", rsValues);
            rangeText.text(rsValues[0] + ' - ' + rsValues[1]);
            oldStep = ui.value;
        }
    });

    rangeSlider.slider({
        min:0,
        max:600,
        values:[0, 0],
        slide:function (event, ui) {
            var step = stepSlider.slider("option", "value");
            var oldValues = rangeSlider.slider("option", "values");
            var rsMax = rangeSlider.slider("option", "max");
            var rsMin = rangeSlider.slider("option", "min");
            var diff;

            if (oldValues[0] != ui.values[0]) {
                diff = ui.values[0] - oldValues[0];
                if (diff > 0 && diff <= step && ui.values[1] === rsMax) {
                    return false;
                }
                ui.values[1] += diff;
                if (ui.values[1] > rsMax) {
                    ui.values[1] = rsMax;
                    ui.values[0] = ui.values[1] - step;
                }
                rangeSlider.slider("option", "values", ui.values);
                rangeText.text(ui.values[0] + ' - ' + ui.values[1]);
                return false;
            }
            if (oldValues[1] != ui.values[1]) {
                diff = ui.values[1] - oldValues[1];
                if (diff < 0 && diff >= -step && ui.values[0] === rsMin) {
                    return false;
                }
                ui.values[0] += diff;
                if (ui.values[0] < rsMin) {
                    ui.values[0] = rsMin;
                    ui.values[1] = ui.values[0] + step;
                }
                rangeSlider.slider("option", "values", ui.values);
                rangeText.text(ui.values[0] + ' - ' + ui.values[1]);
                return false;
            }
            rangeText.text(ui.values[0] + ' - ' + ui.values[1]);
        }
    });
    oldStep = stepSlider.slider("option", "value");
});

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Sliders</title>
        <link href="rangeSliders.css" rel="stylesheet" type="text/css"/>
        <link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    </head>
    <body>
        <div id="stepSlider">
            <div id="stepText">0</div>
        </div>

        <div id="rangeSlider">
            <div id="rangeText">0-600</div>
        </div>
        <script type="text/javascript" src="rangeSliders.js"></script>
    </body>
</html>

CSS:

body {
    margin: 50px;
}

#stepSlider, #rangeSlider {
    width: 200px;
    margin-bottom: 25px;
}

#stepText, #rangeText {
    margin: -4px 0 0 225px;
    width: 100%;
}