Foundation slider
The Foundation slider allows the user to drag to select interval values:
The slider can be created by using the
<div class="range-slider" data-slider>
In
<div>
add two elements of
<span>
<span class="range-slider-handle">
<span class="range-slider-active-segment">
Note: The
slider requires JavaScript.
So you need to initialize the development JS:
实例
<
div
class=
"range-slider"
data-slider
>
<
span
class=
"range-slider-handle"
>
<
/span
>
<
span
class=
"range-slider-active-segment"
>
<
/span
>
<
/div
>
<!-- Initialize Foundation JS -->
<
script
>
$(document).ready(function() {
$(document).foundation();
})
<
/script
>
尝试一下 »
圆角和禁用滑块
使用
.radius
和
.round
类来添加圆角滑块。
使用
.disabled
类来禁用滑块:
实例
<
div
class=
"range-slider"
data-slider
>
..
<
/div
>
<
div
class=
"range-slider radius"
data-slider
>
...
<
/div
>
<
div
class=
"range-slider round"
data-slider
>
...
<
/div
>
<
div
class=
"range-slider disabled"
data-slider
>
...
<
/div
>
尝试一下 »
垂直滑块
使用
.vertical-range
类和
data-options="vertical: true;"
来创建垂直滑块:
实例
<
div
class=
"range-slider vertical-range"
data-slider data-options=
"vertical: true;"
>
<
span
class=
"range-slider-handle"
>
<
/span
>
<
span
class=
"range-slider-active-segment"
>
<
/span
>
<
/div
>
Try it out . . .
The slider value
By default, the slider is placed in the middle of the bar (value "50").
You can
data-options="initial:
num
"
property:
Instance
<
div
class=
"range-slider"
data-slider data-options=
"initial: 80;"
>
<
span
class=
"range-slider-handle"
>
<
/span
>
<
span
class=
"range-slider-active-segment"
>
<
/span
>
<
/div
>
Try it out . . .
Show slider values
If we need to display the value in real time when the slider is dragged, we can add
data-options="display_selector:#
id
"
the element id value matches the slider's id, as follows:
<div>
Instance
<!-- Display the slider value in this span -->
<
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
>
尝试一下 »
Combine data options
The following
display_selector
and
initial
data options:
实例
<
span
id=
"mySlider"
>
<
/span
>
<
div
class=
"range-slider"
data-slider data-options=
"display_selector: #mySlider; i
nitial: 20;
"
>
<
span
class=
"range-slider-handle"
>
<
/span
>
<
span
class=
"range-slider-active-segment"
>
<
/span
>
<
/div
>
Try it out . . .
Step
By default, the increase in slider sliding decreases by "1". Y
ou can
data-options="step:
num
;"
to modify the step value.
Set to 25 in the instance:
Instance
<
span
id=
"mySlider"
>
<
/span
>
<
div
class=
"range-slider"
data-slider data-options=
"display_selector: #mySlider; s
tep: 25;
"
>
<
span
class=
"range-slider-handle"
>
<
/span
>
<
span
class=
"range-slider-active-segment"
>
<
/span
>
<
/div
>
Try it out . . .
Custom intervals
By default, the interval values are from "0" to "100". Y
ou can set interval values by
start
end
and end.
The following instance sets the interval values from "1" to "20":
Instance
<
span
id=
"mySlider"
>
<
/span
>
<
div
class=
"range-slider"
data-slider data-options=
"display_selector: #mySlider; s
tart: 1; e
nd: 20;
"
>
<
span
class=
"range-slider-handle"
>
<
/span
>
<
span
class=
"range-slider-active-segment"
>
<
/span
>
<
/div
>
Try it out . . .
Use the grid
The following is used to use sliders in the grid:
Instance
<
div
class=
"row"
>
<
div
class=
"small-10 columns"
>
<
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
>
<
div
class=
"small-2 columns"
>
<!-- The display element (Tip: use CSS to perfectly position it) -->
<
span
id=
"mySlider"
style=
"display:block;margin-top:14px;"
>
<
/span
>
<
/div
>
<
/div
>
Try it out . . .
使用 Input
以下实例使用
<input>
取代
<span>
来显示滑块的值:
Instance
<
div
class=
"row"
>
<
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"
>
<!-- The display element (Tip: use CSS to perfectly position it) -->
<
input
type=
"number"
id=
"mySlider"
style=
"margin-top:7px;"
value=
"72"
>
<
/div
>
<
/div
>
Try it out . . .