ion-range-slider - 离子范围滑块和模态：如何在显示模态之前填充和填充

Question

我在模态中使用 ionrangeslider

<!-- 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>

我从 ajax 获得了一些值，然后我为滑块设置了to和from

$(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)
        }
    })


})

我发现它打开了模式，然后显示没有往返的滑块，然后更新了往返。用户可以看到他们正在从无到有变化

在我打开模态并在那里显示它们之前如何设置它们。

Answer 1

如果您的滑块在 div 内，只需将其隐藏：

<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();

在向您显示模态之后（或之前）

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

其他解决方案是玩opacity