Question

我想用javascript设置Slider的值，但我不知道该怎么做。我试图修改隐藏输入的值，但滑块手柄不移动。

我的HTML：

 <div class="slider" data-slider data-initial-start="50" data-step="5">
    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" ></span>
    <span class="slider-fill" data-slider-fill></span>
    <input type="hidden"> 
  </div>

请帮忙。感谢。

Answer 1

当您移动滑块手柄时，新值将设置为隐藏输入。但是更改隐藏输入的值不会移动滑块。

所以你可以这样做：

var pos = 5; mySlider = new Foundation.Slider( $("#my_slider"), {initialStart: pos});

Answer 2

你必须改变隐藏输入的类型，并将aria-controls =“id”添加到滑块手柄，“id”是输入的ID - 输入可以在页面的任何位置，然后现在你只需要必须使用javascript

更改输入的值

<div class="slider" data-slider data-initial-start="50" data-step="5">
    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="myInputId" ></span>
    <span class="slider-fill" data-slider-fill></span>
    <input type="number" id="myInputId"> 
</div>


document.getElementById("myInputId").value = "99";

Answer 3

我为此付出了一些努力，真正的关键是您需要做三件事：

使用隐藏的输入字段创建滑块
将输入字段的值设置为新位置
在现场触发变更事件

这是一个简单的示例，显示了它的工作原理。

$(document).foundation();
function jumpto(val) {
   $("#exslider input").val(val).trigger('change');
}
// Just for grins, jump to a fixed location at the start.
jumpto(33);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" rel="stylesheet"/>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
<div class="grid-x">
  <div class="cell">
    <label>This shows setting the values of a foundation slider without having to recreate the slider.
    The key is that the hidden input automatically gets associated with the slider value.
    Setting the value is not enough to cause it to be updated, it is necessary to trigger the change
    event so that foundation knows to update the slider.
    </label>
  </div>
  <div class="cell">
    <div class="slider" id="exslider" data-slider data-end="100">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVal"></span>
      <span class="slider-fill" data-slider-fill></span>
      <input type="hidden">
    </div>
  </div>
  <div class="cell">
  <div class="button-group">
  <a class="button" onclick="jumpto(5);">Jump to 5</a>
  <a class="button" onclick="jumpto(50);">Jump to 50</a>
  <a class="button" onclick="jumpto(100);">Jump to 100</a>
</div>
  </div>
</div>

基础6.2滑块设置值与js

3 个答案: