ion range slider and modal: how to populate to and from before modal is shown

Question

I am using ionrangeslider in a modal

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content" style="width: auto;margin: 0 auto">

        <!-- Modal body -->
        <div class="modal-body">
            <input type="text" id="mySlider"/>
        </div>

      </div>
    </div>
</div>

I get some values from ajax and after that i set the to and from for the slider like

$(document).ready(function () {

    $('#mySlider').ionRangeSlider({
        grid: false,
        type: 'double',
        min: 1,
        max: 10,
        force_edges: true,
        drag_interval: true,
        step: 1,
    });

    $.ajax({
        url: "/get_schedule_for_zone/",
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        data: {"deviceassigned_id":  parseInt(deviceassigned_id),"zone_number": parseInt(zone_number)},
        success: function(res) {
            $('#mySlider').data("ionRangeSlider").update({from: res.to})
            $('#mySlider').data("ionRangeSlider").update({to: res.from})
            $('$myModal').modal('show')
        },
        error : function(xhr,errmsg,err) {
            console.log(err)
        }
    })


})

what i found it the modal open and then shows the slider without to and from, and then updated the to and from. the user can see that they are changing from nothing to some values

how to set them before i open the modal and show them there.

Answer 1

if your slider is inside a div, just hide it:

<div id="slider">
<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"
                        />

</div>


$("#slider").hide();

and after displaying you modal, (or just before)

 $("#slider").show();

other solution is to play with opacity