Jquery Slider UI dynamic step size

javascript jquery jquery-ui slider jquery-ui-slider
daykkin picture daykkin · Sep 1, 2011 · Viewed 10k times · Source

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?

Answer

Benoît picture Benoît · Sep 1, 2011

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/

Related questions

jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

I have a jQuery UI slider: $('div.slider').slider({ range: true, step: 250, min: 1000, max: 500000, values: [1000,500000], change: function(event, ui){ console.log($(this).slider('values', 0)+','+$(this).slider('values', 1)); }, slide: function(event, ui){ console.log($(this).slider('values', 0)+','+$(…

Read More
How do I dynamically change min,max values for jquery ui slider?

So I have a page with a jquery ui slider on it initialized with the following: var min = $("#attrInformation").data("lowest_price"), max = $("#attrInformation").data("highest_price"); $( "#slider-range" ).slider({ range: true, min: min, max: max, values: [ min, max ], slide: function( …

Read More
jQuery UI Slider logarithmic scale

I'm using this jQuery UI code use for a logarithmic slider: var minVal = 10; var maxVal = 100; $("#slider").slider({ range: true, min: minVal, max: maxVal / 2, values: [minVal, maxVal], slide: function(event, ui) { $("#amount_min").val(Number(expon(ui.values[0], minVal, maxVal)).toFixed(0)); $("#…

Read More