菜鸟教程 tryfoundation_slider_value 在线代码实例

运行 保存 全屏 右侧展示 实时查看
主题:

 <div style="padding:20px;">
  <h2>显示滑块值</h2>
 <p>如果我们需要在滑块拖动时实时显示值,可以通过在 <code> &lt;div&gt;</code> 中添加 <code>data-options="display_selector:#<em>id</em>"</code> 属性且元素 id 值与滑块的 id 匹配,如下实例:</p>
  <span id="mySlider"></span>
  <div class="range-slider" data-slider="" data-options="display_selector: #mySlider;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>