Foundation 6.2 Slider使用js设置值

Foundation 6.2 Slider set value with js

本文关键字：js 设置 使用 Slider Foundation      更新时间：2023-10-16

我想用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>

请帮帮我。谢谢

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

所以你可以这样做：

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

我为此挣扎了一段时间，真正的关键是你需要做三件事：

  1. 创建带有隐藏输入字段的滑块
  2. 将输入字段的值设置为新位置
  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>

您必须将输入类型从隐藏更改为向滑块手柄添加aria-controlles="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";
相关文章：