Question

I have an SVG slider that I’ve been working on … please see it on jsFiddle here.
I would like to limit the range of my sliders.

My JS started out as found on this picker (thanks to @Phrogz), then I poked and prodded at it until I was able to strip it down to its current state.
The sliders are working great, but I can really use some guidance on adding the limitations.

For example, I’d like slider_1 (the slider on the left) to be limited to the area in front of the blue rectangle.
JS is still pretty unnatural for me, so I’d appreciate any and all feedback.

Thanks-a-bunch.

Answer 1

Try throwing something like this into your move functions:

var limitLower = 0;
var limitUpper = 20;
if ( x < limitLower || x > limitUpper ) {
    return;
}

Here’s a fiddle with the above code inserted for slider1: http://jsfiddle.net/ucnyz/4/