Question

我想在点击按钮上设置滑块的起始位置。

我尝试使用这种方式，但它没有变化。

我的完整代码。

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-slider.min.css">

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="modernizr.js"></script>
    <script type="text/javascript" src="bootstrap-slider.min.js"></script>

     <style type='text/css'>
        .well {
            background-color: #E0E0E0;
        }
        .slider-example {
            padding: 10px 0;
            margin: 35px 0;
        }
    </style>  

</head>
<body>
    <div class="slider-example">
         <div class="well">
            <span id="ex18-label-1" class="hidden">Example slider label</span>
            <input id="ex19" type="text"
            data-provide="slider"
            data-slider-ticks="[1, 2, 3]"
            data-slider-ticks-labels='["short", "medium", "long"]'
            data-slider-min="1"
            data-slider-max="3"
            data-slider-step="1"
            data-slider-value="3"
            data-slider-min="0"
            data-slider-tooltip="hide" />

        </div>
    <button id="start" class=''>Set</button>
    </div>


</body>
 <script type="text/javascript">
        $("#start").click(function(e) {

            // what i have try is for reset  

            $("#ex19").slider({ min: 0, value: 0, focus: true })

});
    </script>
</html>

我按照这个链接（http://www.jqueryrain.com/?1RE1sMzh）例如19

我希望每当用户点击开始（短）时设置的按钮位置时输出就像这样。

Answer 1

试试这个： -

$("#start").click(function(e) {
   var minval = $("#ex19").data('slider').min; //store slider min value
   $("#ex19").slider('setValue', minval); //set value of slider
   //other logic
});

Answer 2

我需要一种在按下按钮时以编程方式将表单（包括bootstrap-slider组件）重置为其默认值的方法。当加载具有固定值的组件时，我一直在努力使之工作。

例如。 html文档中加载了固定为[2, 5]比例的[0, 10]值的滑块。然后，在调用setValue([0, 10])并刷新时，把手移到[2, 5]位置，而不是[0, 10]处。

此处的所有其他答案均无法完全重置滑块。事实证明，我没有适当地刷新。因此，要始终重置滑块，必须使用{useCurrentValue: true}选项集进行刷新：

let $slider = $("#range-slider").slider({});

$('button').click(() => {  
  let $plugin = $slider.data('slider');

  $plugin
      .setValue([$plugin.options.min, $plugin.options.max])
      .refresh({useCurrentValue: true});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>


<main class="p-3">
    <b class="pr-2">€ 10</b> 
    <input id="range-slider" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]"/> 
    <b class="pl-2">€ 1000</b>
</main>
<main class="p-3">
    <button class="btn btn-secondary">Reset the slider</button>
</main>

如何重置bootstrap的jquery范围滑块的起始位置？

2 个答案: