Feature request: strict ticks.

[Moghul]

Well, I've got a fairly specific scenario here, and this project can't seem to do it quite right.

I've got these ticks:

[0, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2200, 2400, 2600, 2800, 3000, 3500, 4000, 4500, 5000]

These positions:

[0, 3.5714285714285716, 7.142857142857143, 10.714285714285715, 14.285714285714286, 17.857142857142858, 21.42857142857143, 25, 28.571428571428573, 32.142857142857146, 35.714285714285715, 39.285714285714285, 42.85714285714286, 46.42857142857143, 50, 53.57142857142858, 57.142857142857146, 60.714285714285715, 64.28571428571429, 67.85714285714286, 71.42857142857143, 75, 78.57142857142857, 82.14285714285715, 85.71428571428572, 89.28571428571429, 92.85714285714286, 96.42857142857143, 100]

And these labels:

[0, "", "", "", "", 500, "", "", "", "", 1000, "", "", "", "", 1500, "", "", "", "", 2000, "", "", "", "", 3000, 3500, 4000, 4500, 5000]

The other options are

{min: 0
max: 5000
step: 100}

I want the user to only be able to select from the list of available ticks.

I am aware of what a logarythmic scale is, but if you notice, I've also got the special case where 100 is not a value in the ticks.

The problem is that 0-2000 everything works fairly well. I can select a value at intervals of 100.

However, starting with 2000 where the step starts to change (200, and then 500), the user can select some pretty random values because the step is at a fixed 100. Worse, for whatever reason, you can't even select some of the ticks I'm interested in.

I'll have to write some special code where only the tick values are valid, and have the value change if the user selects something else, but I'd rather this was a feature: have a flag that blocks the user from selecting values outside of ticks.

[seiyria]

If this is the case, just make the slider with only the ticks that you have available. Pass them in to the ticks option.

[Moghul]

@seiyria If that had worked, I would not have made this thread

My options:

{  
   "step":100,
   "tooltip":"always",
   "value":1500,
   "id":"mySlider",
   "ticks":[  
      100,
      200,
      300,
      400,
      500,
      600,
      700,
      800,
      900,
      1000,
      1100,
      1200,
      1300,
      1400,
      1500,
      1600,
      1700,
      1800,
      1900,
      2000,
      2200,
      2400,
      2600,
      2800,
      3000,
      3500,
      4000,
      4500,
      5000
   ],
   "ticks_positions":[  
      0,
      3.5714285714285716,
      7.142857142857143,
      10.714285714285715,
      14.285714285714286,
      17.857142857142858,
      21.42857142857143,
      25,
      28.571428571428573,
      32.142857142857146,
      35.714285714285715,
      39.285714285714285,
      42.85714285714286,
      46.42857142857143,
      50,
      53.57142857142858,
      57.142857142857146,
      60.714285714285715,
      64.28571428571429,
      67.85714285714286,
      71.42857142857143,
      75,
      78.57142857142857,
      82.14285714285715,
      85.71428571428572,
      89.28571428571429,
      92.85714285714286,
      96.42857142857143,
      100
   ],
   "ticks_labels":[  
      "",
      "",
      "",
      "",
      500,
      "",
      "",
      "",
      "",
      1000,
      "",
      "",
      "",
      "",
      1500,
      "",
      "",
      "",
      "",
      2000,
      "",
      "",
      "",
      "",
      3000,
      3500,
      4000,
      4500,
      5000
   ],
   "rangeHighlights":[  
      {  
         "start":0,
         "end":300
      },
      {  
         "start":300,
         "end":800
      },
      {  
         "start":800,
         "end":5000
      }
   ]
}

The result:

Notice how 2100 is not on my list of ticks? Why can I select it? Can I make it so only the ticks are selectable?

[seiyria]

Please make a jsfiddle.

[Moghul]

Here:

Fiddle

[TakesTheBiscuit]

https://jsfiddle.net/eswoosh/td9w868w/

Results in:

I just added 2100 to 'ticks', i don't understand the issue here?

[Moghul]

Wow.

I want the user to only be able to select from the list of available ticks.

Can I make it so only the ticks are selectable?

The issue is that I DON'T want 2100. I only want the user to be able to select values in my ticks array.

[TakesTheBiscuit]

@Moghul Understood - now i see why this is a feature request

[Moghul]

Exactly. I don't have the time to understand how this library works right now, but this fiddle below was updated with the workaround I used:

An array the size of my original ticks to be used solely by the slider. The tooltip and labels show the value at the correct index in the old ticks array.

Fiddle

[heidarsaleh]

Hello guys, I created a pull request for this feature. Basically I added a new option "lock_to_ticks" that will force the slider to select values from the ticks array only. https://jsfiddle.net/y08L5zv7/2/ https://github.com/seiyria/bootstrap-slider/pull/744

there are 2 issues reported by codeclimate for core duplication between src and dist folders. It's not related to the update made. Please review and merge if possible, Thanks.

Best Regards Heidar

[seiyria]

Please follow our contribution guidelines if you would like us to merge your PR.

Specifically, this includes not committing dist, as well as the other guidelines I posted in the PR itself (unit tests, documentation updates, etc). We will not merge unless everything is present and accounted for.