菜鸟教程 tryfoundation_slider_value_input 在线代码实例

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

 <div class="row">
  <h2>使用 Input</h2>
  <p>以下实例使用 <code>&lt;input&gt;</code> 取代 <code>&lt;span&gt;</code> 来显示滑块的值:</p>
  <div class="small-10 columns">
    <div class="range-slider" data-slider="" data-options="display_selector: #mySlider; initial: 72;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <input type="number" id="mySlider" style="margin-top:7px;" value="72">
  </div>
</div>

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