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?

arogachev
  • 33,150
  • 7
  • 114
  • 117
daykkin
  • 53
  • 1
  • 1
  • 3

3 Answers3

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/

Benoît
  • 7,395
  • 2
  • 25
  • 30
  • Thanks, it is almost what i want, but my slider looks so: http://s4.postimage.org/98s5cwrll/slider.jpg So points interval is dynamic (point 65 = 65 steps) – daykkin Sep 01 '11 at 10:14
  • Well, then i'd suggest you look at my answer. – Py. Sep 01 '11 at 10:39
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.

Py.
  • 3,499
  • 1
  • 34
  • 53
  • Your welcome :) (and you can accept this answer instead of the other if it's what you're looking for :) ) – Py. Sep 01 '11 at 10:47
  • One more question, How can i make handle effect smooth moving? – daykkin Sep 01 '11 at 13:02
  • 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. – Py. Sep 01 '11 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. – daykkin Sep 01 '11 at 14:05
  • 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 ?) – Benoît Sep 01 '11 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. – Py. Sep 01 '11 at 14:29
  • Last update dont force the user to choose between only 7 points :( user can choose anyone point from 2 to 65. – daykkin Sep 01 '11 at 15:23
  • Also I have seen strange thing. When i go to http://jsfiddle.net/KyKqq/ in my Ie9, sliders work excellent, but if i copy all frame code in results from to , slider doesn't react in any way to a mouse click. wtf? – daykkin Sep 01 '11 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? – Py. Sep 01 '11 at 15:29
  • Yes, i see now how work last update, great! About html, yes, i open up firebug copy all content from to in results frame, and this dont work in IE9, also this jquery code dont work in my local html (IE9). Another browser feel fine! – daykkin Sep 01 '11 at 15:31
  • I have updated to have the nearest value : http://jsfiddle.net/bouillard/KyKqq/9/ – Benoît Sep 01 '11 at 15:38
  • I think it's not the nearest but the closest inferior value no? – Py. Sep 01 '11 at 16:31
  • its great! and work in IE9 without any problems. Thanks guys, you are so awesome! – daykkin Sep 01 '11 at 21:39
0

In the following rang price slider step value update dynamically like between 1 to 10000 step will be 100 and between 10000 to 50000 step will be 500 then step will be 1000 Until then 100000 then step will be 1500, 10000, 100000 bases on define value.

This slider will be useful when we went to make steps lower to higher in a big amount of price.

Just we need to define the collection of steps and another one for a given step value on step change, we need to define that value. <> http://jsfiddle.net/Ng_gajera/bt8dusrz/2/

nirali
  • 73
  • 5