ionrangeslider: How to not show anything when from value is less than min value

763 Views Asked by At

I have set up a ionrangeslider. I am mainly using it for displaying my temperature values

I keep updating the from value using ajax dynamically

                        <input type="text" class="js-range-slider" id="test" name="my_range" value=""
                            data-min="40"
                            data-max="210"
                            data-from="{{row2.7}}"
                            data-grid="true",
                            data-hide-min-max="true",
                            data-postfix="'F"
                        />

                        $('.js-range-slider').ionRangeSlider()


                        //later i am changing the from value using

                         let intst = $(#test).data("ionRangeSlider");

                         intst.update({
                           from: 0 //your new value
                         });

I have min: 40 and max: 210, and when my from: 0, then i want the slider not show anything

where what i see

enter image description here

1

There are 1 best solutions below

0
On BEST ANSWER

add data-type:

<input type="text" class="js-range-slider" id="test" name="my_range" value=""
                            data-min="40"
                            data-max="210"
                            data-from="{{row2.7}}"
                            data-grid="true"
                            data-hide-min-max="true"
                            data-postfix="'F"
                            data-type="double"
                        />

$('.js-range-slider').ionRangeSlider();


//later i am changing the from value using

var inst = $("#test").data("ionRangeSlider");

inst.update({
  from: 0,
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/ion.rangeSlider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/ion.rangeSlider.min.js"></script>




<input type="text" class="js-range-slider" id="test" name="my_range" value=""
                            data-min="40"
                            data-max="210"
                            data-from="{{row2.7}}"
                            data-grid="true"
                            data-hide-min-max="true"
                            data-postfix="'F"
                            data-type="double"
                        />