滑块

JavaScript

这个方便的小滑块非常适合在范围内设置特定值。

基础知识

通过向容器元素添加类 .slider 和属性 data-slider 来创建滑块。您还应该为滑块定义起始值和最大值。

容器内有三个元素

手柄 (.slider-handle)，用户拖动它。
填充 (.slider-fill)，它根据手柄的位置动态调整大小。
一个隐藏的 <input>，滑块的值存储在这里。

data-initial-start="" 值是手柄沿滑块开始的位置。 data-end="" 是滑块的最大值。在下面的示例中，从 200 的 50 开始意味着滑块手柄将从总量的 25% 开始。

在视频中观看此部分

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

垂直

要获得*垂直*，只需添加一个 .vertical 类和 data-vertical="true" 滑块。

在视频中观看此部分

<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

禁用

添加类 .disabled 以禁用与滑块的交互。

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

两个手柄

双柄滑块可用于定义值的范围，而不是单个值。要制作双柄滑块，请添加第二个手柄和第二个 <input>。这适用于水平和垂直滑块。

您可以将 ID 添加到滑块内的 <input>，以便更轻松地访问值。如果您不这样做，插件将为每个插件添加一个 ID。

请注意，第一个手柄操作第一个 <input>，而第二个手柄操作第二个 <input>。

在视频中观看此部分

<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <input type="hidden">
  <input type="hidden">
</div>

数据绑定

数据绑定允许您将滑块连接到外部 <input> 字段。设置数据绑定后，拖动手柄将更改文本字段内的值，并在文本字段中编辑数字将实时移动滑块。

要完成所有设置，请创建一个带有 ID 的 <input> 并将 aria-controls="id" 添加到滑块手柄，其中 id 是 <input> 的 ID。

在视频中观看此部分

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput1">
  </div>
</div>

或者使用步长

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <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="sliderOutput2"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput2">
  </div>
</div>

原生范围滑块

在 Foundation 6.2 中，我们引入了 <input type="range"> 的样式，这是范围滑块的原生 HTML 元素。并非所有浏览器都支持它，即 IE9 和一些较旧的移动浏览器。查看范围输入类型的浏览器支持。

在视频中观看此部分

<input type="range" min="1" max="100" step="1">

如果您使用的是 Sass 版本的 Foundation，请将此行添加到您的主 Sass 文件中

@include foundation-range-input;

可以在同一个代码库中同时使用 JavaScript 滑块和原生滑块，因为使用的 CSS 选择器不重叠。以下是原生滑块的不同之处

更少的标记：只需编写 <input type="range"> 即可。
不需要 JavaScript，这保证了它在大多数浏览器中运行更快。
要禁用滑块，请添加 disabled 作为属性，而不是类。
不支持垂直方向。
不支持两个手柄。

非线性值转换

有时并非每个值都同等重要。在下面的示例中，滑块通过添加 log 类型的定位值函数来关注更高的数字。或者，还有一个 pow 类型的定位值函数可用，可以反过来实现。

nonLinearBase 选项是可选的，默认为 5。

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutputNonLinear">
  </div>
</div>

重排

滑块在计算如何显示自身时会考虑手柄的宽度。这意味着，如果滑块最初是隐藏的，或者在调整值时隐藏，则最终的视觉效果会略有不同，因为手柄的宽度是不确定的。如果这有问题，您可以使用 JavaScript 在您将其从隐藏状态更改时导致滑块重排。示例

$('#my-slider').show();
$('#my-slider').foundation('_reflow');

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$slider-width-vertical`	数字	`0.5rem`	垂直滑块的默认滑块宽度。（不适用于原生滑块。）
`$slider-transition`	过渡	`all 0.2s ease-in-out`	要应用于滑块手柄和填充的过渡属性。（不适用于原生滑块。）

混入

我们使用这些混入来构建此组件的最终 CSS 输出。您可以自己使用这些混入来从我们的组件中构建您自己的类结构。

slider-container

@include slider-container;

添加滑块的常规样式。

slider-fill

@include slider-fill;

添加滑块的活动填充的常规样式。

slider-handle

@include slider-handle;

添加滑块手柄的常规样式。

JavaScript 参考

初始化

以下文件必须包含在您的 JavaScript 中才能使用此插件

foundation.core.js
foundation.slider.js
- 使用实用程序库 foundation.util.motion.js
- 使用实用程序库 foundation.util.triggers.js
- 使用实用程序库 foundation.util.keyboard.js
- 使用实用程序库 foundation.util.touch.js

Foundation.Slider

创建滑块控件的新实例。

var elem = new Foundation.Slider(element, options);

名称	类型	描述
`元素`	jQuery	要转换为滑块控件的 jQuery 对象。
`选项`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义滑块的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性或作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-start`	`数字`	`0`	滑块刻度的最小值。
`data-end`	`数字`	`100`	滑块刻度的最大值。
`data-step`	`数字`	`1`	每次更改事件的最小值更改。
`data-initial-start`	`数字`	`0`	初始化时应设置手柄/输入（左 handle/第一个输入）的值。
`data-initial-end`	`数字`	`100`	初始化时应设置右 handle/第二个输入的值。
`data-binding`	`布尔值`	`false`	允许输入位于容器外部并可见。由 JS 设置
`data-click-select`	`布尔值`	`true`	允许用户单击/点击滑块栏以选择值。
`data-vertical`	`布尔值`	`false`	设置为 true 并使用“vertical”类将对齐方式更改为垂直。
`data-draggable`	`布尔值`	`true`	允许用户拖动滑块手柄以选择值。
`data-disabled`	`布尔值`	`false`	禁用滑块并阻止应用事件侦听器。由 JS 使用“disabledClass”仔细检查。
`data-double-sided`	`布尔值`	`false`	允许使用两个手柄。由 JS 仔细检查。更改一些逻辑处理。
`data-decimal`	`数字`	`2`	插件应该用于浮点精度的十进制位数。
`data-move-time`	`数字`	`200`	如果用户单击/点击栏，则动画滑块手柄移动的时间（以毫秒为单位）。如果在 Sass 设置中更新过渡时间，则需要手动设置。
`data-disabled-class`	`字符串`	`disabled`	应用于禁用滑块的类。
`data-invert-vertical`	`布尔值`	`false`	将反转垂直滑块的默认布局。
`data-changed-delay`	`数字`	`500`	在值更改后触发 `changed.zf-slider` 事件之前的毫秒数。
`data-non-linear-base`	`数字`	`5`	非线性滑块的基本值
`data-position-value-function`	`字符串`	`linear`	非线性滑块的基本值，可能的值为：“linear”、“pow”和“log”。Pow 和 Log 使用 nonLinearBase 设置。

事件

这些事件将从任何附加了 Slider 插件的元素触发。

名称	描述
`moved.zf.slider`	手柄完成移动时触发。
`changed.zf.slider`	在给定时间内值未更改时触发。

方法

_destroy

$('#element').foundation('_destroy');

销毁滑块插件。