Foundation 滑块
Foundation 滑块允许用户通过拖动来选取区间值:
滑块可以通过使用 注意:滑块需要使用 JavaScript。所以你需要初始化 oundation JS: .range-slider-handle 类创建一个滑块实体（蓝色矩形），.range-slider-active-segment 在滑块后添加灰色横条： 点击 "运行实例" 按钮查看在线实例 使用 使用 点击 "运行实例" 按钮查看在线实例 使用 使用 点击 "运行实例" 按钮查看在线实例 默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 点击 "运行实例" 按钮查看在线实例 如果我们需要在滑块拖动时实时显示值，可以通过在 如果我们需要在滑块拖动时实时显示值，可以通过在 点击 "运行实例" 按钮查看在线实例 以下实例使用了 默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 点击 "运行实例" 按钮查看在线实例 默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options 默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options 点击 "运行实例" 按钮查看在线实例 以下使用为在网格中使用滑块： 以下实例使用元素:创建矩形滑块（蓝色背景），是在滑块后的灰色横条，是滑块拖动区域。
实例
区间滑块
运行实例 »
圆角和禁用滑块
.radius和.round类来添加圆角滑块。使用.disabled类来禁用滑块：实例
圆角 & 禁用滑块
.radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块：
运行实例 »
垂直滑块
.vertical-range类和data-options="vertical: true;"来创建垂直滑块:实例
垂直滑块
.vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块:
运行实例 »
滑块值
data-options="initial:num"属性来修改默认值:实例
默认滑块值
data-options="initial: num" 属性来修改默认值:
运行实例 »
显示滑块值
data-options="display_selector:#id"属性且元素 id 值与滑块的 id 匹配，如下实例：
实例
显示滑块值
data-options="display_selector:#id" 属性且元素 id 值与滑块的 id 匹配，如下实例：
运行实例 »
组合数据选项
display_selector和initial数据选项:步长
data-options="step:num;"属性来修改步长值。实例中设置为 25:实例
步长
data-options="step: num;" 属性来修改长值。实例中设置为 25:
运行实例 »
自定义区间
start和end来设置区间值。以下实例设置区间值为 "1" 到 "20":实例
自定义区间
start 和 end 来设置区间值。以下实例设置区间值为 "1" 到 "20":
运行实例 »
使用网格
使用 Input
取代来显示滑块的值:
Navigation dans le didacticiel