Create Upper Limit

[bensquire]

Is it possible (or how difficult would it be) to create an upper bound, so that the slider cannot be moved passed that position?

At the moment I'm detecting the slider change event and trying to adjust the slider back down again, however this is causing propogation issues and although the sliders value is updated correctly, the slider position doesn't match.

Any thoughts or advice? Cheers Ben

An example snippet:

$("#impact").bind("slider:changed", function (event, data) {
    var initialImpact = parseInt($("#initial_impact").val(), 10);
    var newImpact = parseInt(data.value, 10);

    if (newImpact > initialImpact) {
        $("#impact").simpleSlider("setValue", initialImpact);
        return false;
    }

    //...do something else
});

[maartenvg]

You want to change the part of the code that normalizes the click to the boundaries of the element. Specifically a part of the domDrag function.

# Normalize position within allowed range
  pagePos = pageX - @slider.offset().left
  pagePos = Math.min(@slider.outerWidth(), pagePos)
  pagePos = Math.max(0, pagePos)

As you can see it calls @slider.outerWidth(), you want to replace this by a value of your own. Of course, this is in pixels, so if you want to do it based on value, you need to translate the value to a pixel or ratio first.

[bensquire]

Thanks @maartenvg this might be a bit out of my scope but I'll see what I can do.

[truerup]

I need to make the lower limit bound, below which the slider can not be dragged. Can you please let me know how to achieve this?

[bensquire]

Hi @truerup, in the end I used a listener that detected if the slider dropped below a certain value and then put it back, bit hacky but its worked without issue (In fact as I suggested above).

[truerup]

Yes it worked !! Thanks a lot :) The following code worked to reset the slider value to the dynamically passed lower limit:

$("#my_slider").bind("slider:changed", function (event, data) { if(parseFloat(data.value.toFixed(0))< parseFloat($('#ctrl_passing_dynamic_limit').val())){ setTimeout('$("#my_slider").simpleSlider("setValue", $("#ctrl_passing_dynamic_limit").val());',1); }

                                return false;
                            }

[bensquire]

Awesome, no worries! Whats the purpose of the setTimeout function? It shouldn't be necessary.