IonRangeSlider assign labels to values

Question

I am using ionRangeSlider and I want assign labels to values or vice versa.

So user can pick distance from beach with options: 'on beach', '100m', '200m', '300m', 'more than 300m' but i need in post values like '0', '100', '200', '300', 999

My init:

$("#idSelector").ionRangeSlider({
    ...
    values_separator: " to ",
    values: [
        'on beach', '100m', '200m', '300m', 'more than 300m'
    ],
    ...

Is there some way to do it? (for using ionRangeSlider because get values and parse they i can on my way)

I was trying set min and max options for ionRangeSlider but it doesn't work.

Any ideas?

score 9 · Accepted Answer · answered Mar 27 '17 at 07:38

9

It could be done pretty easy. Check this demo:

http://jsfiddle.net/IonDen/bvbvr0xs/

var $range = $(".js-range-slider");
var $result = $(".js-result");

var values = [0, 100, 200, 300, 999];
var values_p = ["on the beach", "100m", "200m", "300m", "more then 300m"];

$range.ionRangeSlider({
    type: "single",
    grid: true,
    values: values,
    prettify: function (n) {
        var ind = values.indexOf(n);
        return values_p[ind];
    },
    onStart: function(data) {
        $result.text(data.from_value);
    },
    onChange: function(data) {
        $result.text(data.from_value);
    }
});

answered Mar 27 '17 at 07:38

IonDen

773
5
15

1

Hi is there any way I can have 'values' in horizontal axis but 'values_p' in the 'span.irs-single' tooltips title. – Bikash kharel Dec 07 '18 at 14:51
I am not sure but I get this error when try it `64:8 Uncaught TypeError: $range.ionRangeSlider is not a function` – Lim Han Yang Jul 03 '20 at 02:53

score -1 · Answer 2 · answered Jan 27 '17 at 10:36

The values for the slider are different than the labels - the labels are just for the user.

You want the min value to be 0, and the max to be 400 (400 can your more than 300 value) and have a step of 100. This will give you your desired slider values

Now for the labels. They need to be separate from the slider - create each label in a p element below it wrapped in a div. Give the p elements absolute positioning with each one having a left css value.

Like this:

<div id='labels' style='position:relative; width:100%'>
   <p style='position:absolute;left:0'>on beach</p>
   <p style='position:absolute;left:25%'>100m</p>
   <p style='position:absolute;left:50%'>200m</p>
   <p style='position:absolute;left:75%'>300m</p>
   <p style='position:absolute;left:100%'>more than 300m</p>
</div>

You may need to give labels a fixed width

Thx for response but this solution brings many disadvantages for example labels are not clickable and you can't move with range, they not 'follow' min and max point and they not dissappear if you set higher than min value (like ionRangeSlider default labels) — Lajdák Marek, Jan 27 '17 at 10:48

IonRangeSlider assign labels to values

2 Answers2

Linked