search

IonDen / ion.rangeSlider

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

How to use two values? #761

Open rjsnh1522 opened 3 years ago

rjsnh1522 commented 3 years ago

I have one array with count of users and other array with cost of that user. example: var users = [20, 50, 100, 250, 500] var cost = [5, 15, 30, 50, 90] It means when someone selects 20 users the label at the top should show 5, when someone selects 100 the top small icon should show 50. the horizontal x would the users and the top small icon place should show the cost, I have used prettify and passed it a function but somehow it is changing the horizontal values to the cost.

I can directly change the text inside the html using On change method. but i m looking for some cleaner way of doing this.

Urgent help is required.

IonDen commented 3 years ago

Hi, it is impossible to have 2 different set of values at the same time, but instead you could use "custom marks" technique to show additional line of values at the bottom. Example: http://ionden.com/a/plugins/ion.rangeSlider/showcase.html#a_marks

rjsnh1522 commented 3 years ago

Thanks for response, I will try that link but just to make my question more clear I posting an image and trying to explain again what I want. slider

In this image, u can see that below the slider grid is there and have some values. [0, 250, 500, 750, 100] and when u slide the slider the value in the blue HTML changes, but the value is from that range only. I want to put something else there.

Please check the image. Please pardon the handwriting I m not used to iPad and have zero editing skills.

rjsnh1522 commented 3 years ago

Hi,

Somehow I managed to change your code and made it work like how I wanted. I have only changed it for single slider

in ionRangeSlider I am passing one more option top_labels which is the array of the top labels in my case I want to show the price of the number of users. and I made changes in two places.

  1. when setting min max value in setMinMax there I checked if top_labels is not undefined. and its length is greater than zero. and inside that I set this.$cache.min.html(this.decorate(top_labels[0])); for min value this.$cache.max.html(this.decorate(top_labels[top_labels.length - 1])); for max value andit worked.

  2. In drawLabels i did almost same thing in type is single. and values_num is present. I did text_single = this.decorate(top_labels[this.result.from]) this.$cache.single.html(text_single); else your code would work.

It is not a very clean way to do things, it's just a hack to make it work. you can add this feature probably.

### Thanks for this awesome plugin.

IonDen commented 3 years ago

Great that you figured it out. 2.x branch will not receive any new features. I'm slowly working on 3.x and it will have plenty of them.