Foundation slider


May 04, 2021 13:00 Foundation5


Table of contents


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 . . .