ion.rangeSlider lock the slider to predefined values

Question

Is there an option to lock the slider to predefined values? I mean

values: ["7.5", "15", "35", "65", "99", "125", "150", "199", "299", "399", "499"],

Now I want to only move "7.5" to 15,35.....499,

how it is possible? because when I start slider from "7.5" then it shows me 43, 79.I don't want these values , slider only move given values! Can you please!

    if($('#range_slider_a').length) {
            $("#range_slider_a").ionRangeSlider({
               type: "single",
                step: 10,
               postfix: " $",
               min: 7.5,
               max: 499,
               //from: 7.5,
               hasGrid: true,
            values: ["7.5", "15", "35", "65", "99", "125", "150", "199", "299", "399", "499"], 
              onChange: function(obj) {
                var current_price =     $('#range_slider_a').prop("value");
                $('#contact_limit').empty().append(''+current_price);
                $('#contact_price').empty().append(''+current_price);
                //alert(current_price);

             },
            });



        }

http://ionden.com/a/plugins/ion.rangeSlider/en.html – user2841243 Apr 28 '14 at 05:06 — user2841243, Apr 28 '14 at 05:06

score 1 · Answer 1 · edited Nov 21 '19 at 10:34

maybe you are using old version of Ion.RangeSlider. Check the new version here: https://github.com/IonDen/ion.rangeSlider

Try this example to set up the slider correct way:

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

$range.ionRangeSlider({
    type: "single",
    postfix: " $",
    grid: true,
    values: ["7.5", "15", "35", "65", "99", "125", "150", "199", "299", "399", "499"]
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" integrity="sha256-nv5vSBJAzPy+07+FvRvhV2UPpH87H/UnWMrA6nbEg7U=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js" integrity="sha256-eXdxIh/sjKTNi5WyC8cKHekwPywORiomyiMFyZsowWw=" crossorigin="anonymous"></script>

<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>

score 0 · Answer 2 · answered Nov 27 '14 at 04:38

0

You have to change from to 0.
in your situation from is the index of values array, so if you want to start the slider from 7.5 you have to set 0 for from property.

answered Nov 27 '14 at 04:38

Mohammad Dayyan

21,578
41
164
232

ion.rangeSlider lock the slider to predefined values

2 Answers2