Fomantic-UI
Fomantic-UI copied to clipboard
[silder] Customizing the tick and half-tick labels of a ticked slider
Feature Request
A ticked slider creates tick & half-tick labels automatically based on the ticked slider's width.
Problems
Things to consider:
- Is it possible to add a config for only creating the beginning and ending label (not the inner labels).
- Is it possible to add a config to let the developer to decide which inner(tick & half-tick) labels should be created.
- for sliders which have big min & max (more than 1000), because of creating many half-tick labels, the browser creates the slider with a huge lag time
Example
How to create an example:
- Open the following JSFiddle - https://jsfiddle.net/e85wjc1x/10/ (make the right side column as wide as possible)
for the first issue
- the image below is the price slider of our website, which the min & max price is different every time the page loads.
and the min max difference is usually big, so i had to set 1000 steps as a constant.
so each step length is calculated by (max-min)/1000, but I wanted a constant length such as 10, but because of the browser lag for ticked slider, i could only set 1000. in the img below, i had to manually hide all the inner tick & half-tick labels because i didn't want them for the small width slider.
for the second issue
2.1 if you set the slider width on 300 and the end input on 1000 you will be get these inner labels
2.2 but if you set the slider width on 1000 and the end input on 1000 you will be get these inner labels
the labels in case 2.1 and 2.2 is different, I want to know is it possible to set a config that:
- the developer could choose to have inner (tick and half tick) labels or not (just have the beginning and ending labels)
- if the developer want the inner labels, he can choose which ones to show (unauto mode)