Jquery Slider UI dynamic step size

C

3

5

I have a slider with the following properties:

an horizontal direction
one handle
a min of 2
a max of 65

My goal is to force the user to choose between only 7 points (for example: "2, 3, 4, 26, 39, 52, 65") and nothing more.

How do I create a dynamic step size or how do I allow only those points to be the slider steps?

Charleycharlie answered 1/9, 2011 at 8:19 Comment(0)

S

3

I suggest that you look at the slide event. Doc is here. It says

Return false in order to prevent a slide, based on ui.value.

So you'll just have to return false when the value is not the one you're aiming.

Edit: Damn it, the link just got you to the slider page. What I'm talking about is in the Events tab, and it's the one named slide

Edit2: a fiddle using it. The main difference with the other solution is that the sliding won't be uniform in this one.

Edit3: Another fiddle. In this one , if an incorrect value is reached at the end of the slide, it will go back to the previous correct value.

Stramonium answered 1/9, 2011 at 8:30 Comment(13)

Your welcome :) (and you can accept this answer instead of the other if it's what you're looking for :) ) – Stramonium 1/9, 2011 at 10:47

One more question, How can i make handle effect smooth moving? – Charleycharlie 1/9, 2011 at 13:2

You mean that it won't move from one step to another abruptly? if that's it, i'll edit the answer with another fiddle as soon as i can. – Stramonium 1/9, 2011 at 13:15

Yes, approximately so, now at moving the cursor should leave further from destination and only then the hand is exposed on this point, it forces down logic slider and can confuse the user. It would be fine, if the hand followed the cursor at once at the moment of movement to destination. – Charleycharlie 1/9, 2011 at 14:5

OK, this answer is better for your usecase. But Py, you could give me a point for my jsfiddle reuse... (Better is not to go to the further value than the previous value for incorrect points ?) – Buzz 1/9, 2011 at 14:17

daykkin, i didn't understood your last comment (did you see the updated fiddle?). @Benoit: my bad, i thought i had done that. – Stramonium 1/9, 2011 at 14:29

Last update dont force the user to choose between only 7 points :( user can choose anyone point from 2 to 65. – Charleycharlie 1/9, 2011 at 15:23

Also I have seen strange thing. When i go to jsfiddle.net/KyKqq in my Ie9, sliders work excellent, but if i copy all frame code in results from <html> to </html>, slider doesn't react in any way to a mouse click. wtf? – Charleycharlie 1/9, 2011 at 15:27

Well, he can travel between all the point but can only stop at the 7 predefined points. What do you mean by copying all the html? The one generated by jQuery? – Stramonium 1/9, 2011 at 15:29

Yes, i see now how work last update, great! About html, yes, i open up firebug copy all content from <html> to </html> in results frame, and this dont work in IE9, also this jquery code dont work in my local html (IE9). Another browser feel fine! – Charleycharlie 1/9, 2011 at 15:31

I have updated to have the nearest value : jsfiddle.net/bouillard/KyKqq/9 – Buzz 1/9, 2011 at 15:38

I think it's not the nearest but the closest inferior value no? – Stramonium 1/9, 2011 at 16:31

its great! and work in IE9 without any problems. Thanks guys, you are so awesome! – Charleycharlie 1/9, 2011 at 21:39

E

4

Why not use a slider with only 7 points, and convert your value with a table:

see my jsfiddle example http://jsfiddle.net/bouillard/Uy5sD/

Enamelware answered 1/9, 2011 at 8:29 Comment(2)

Thanks, it is almost what i want, but my slider looks so: s4.postimage.org/98s5cwrll/slider.jpg So points interval is dynamic (point 65 = 65 steps) – Charleycharlie 1/9, 2011 at 10:14

Well, then i'd suggest you look at my answer. – Stramonium 1/9, 2011 at 10:39