CODEWITHSUNDEEP
ion-range-slider
Santhosh
Santhosh

Reputation: 11774

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

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.

Upvotes: 0

Views: 314

Answers (1)

Frenchy
Frenchy

Reputation: 16997

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

Upvotes: 0

Related Questions