search

IonDen / ion.rangeSlider

jQuery only range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html
MIT License
2.55k stars 508 forks source link

ion range slider custom grid value using prettify and moment.js #549

Closed priraut88 closed 4 years ago

priraut88 commented 6 years ago

I am using ion range slider in my application. Where input data is in "year-week" format. e.g("2017-02","2017-34" -- here 02 & 34 is no of weeks). I need to show actual month from that year-week string on the grid. To convert this year-week into month I am using moment.js. In prettify function I am trying to show months. But In this case, as prettify doesn't accept string with "-" character I am converting it before passing to prettify function. after doing this prettify function accepts the input and converts it to months. Now here I need single value for months as there are multiple weeks from the same month. e.g for "Jan" there are 5 records like "2017-01","2017-02","2017-03","2017-04","2017-05". now i need, Ion slider grid should show "Jan" month only once instead of showing "Jan" 5 times on grid for 2017. How should I avoid these duplicate entries from grid.

Please let me know where I am going wrong.

Sharing the fiddle : http://jsfiddle.net/09u17wg7/90/

@IonDen your help would be appreciable.

IonDen commented 6 years ago

Hi, check this demo: http://jsfiddle.net/IonDen/bxuoutr7/

best idea from the top of my head.

priraut88 commented 6 years ago

@IonDen Thanks for providing solution. but with this solution I am not getting exact output which I want. In prettify, it is actually checking immediate old values. but the case where values are not in the specific order, it fails. Also, with the current solution we are getting ticks with blank labels, instead we need consistent labels on grid. e.g. If there will be 5 weeks in Jan and in Feb if 2 weeks are there then in that case we will see only Jan and Feb, and ticks will be on weekly basis. Unfortunately, I am not able to achieve this behavior with the current solution.

Can you please provide any other solution for the same?

IonDen commented 6 years ago

I have no idea man, you need too custom solution.

The other best idea would be to use external grid:

  1. Disable build-in grid.
  2. Draw you own grid and position it below the slider
ajsjunior commented 5 years ago

Any expected date for release this feature?