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

如何解决离子范围滑块和模态：如何在显示模态之前填充和填充

我在模态中使用 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)
        }
    })


})

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

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

解决方法

如果您的滑块在 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