Foundation slider
Foundation slider allows the user to select the range of values by dragging:
Slider by using <div class="range-slider" data-slider>
" data-slider> Create. In the <div>
inside, add two <span>
element: <span class="range-slider-handle">
Create a rectangular slider (blue background), <span class="range-slider-active-segment">
in the gray bar slider after the slider area.
Note: The slider requires JavaScript. So you need to initialize oundation JS:
Examples
<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>
Fillet and disable slider
Use .radius
and .round
classes to add rounded corners slider. Use .disabled
class to disable the slider:
Examples
<Div class = "range-slider " data-slider> /en </ div>
<Div class = "range-slider radius" data-slider> /en. </ div>
<Div class = "range-slider round" data-slider> /en. </ div>
<Div class = "range-slider disabled" data-slider> /en. </ div>
Vertical slider
Use .vertical-range
classes and data-options="vertical: true;"
;" to create a vertical slider:
Examples
<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>
Slider value
By default, the slider bar in the middle of (a value of "50"). You can add data-options="initial: num "
" to modify the default value of the property:
Examples
<Div class = "range-slider " data-slider data-options = "initial: 80;">
<Span class = "range-slider -handle"> </ span>
<Span class = "range-slider -active-segment"> </ span>
</ Div>
Display slider value
If we need to drag the slider value when the real-time display, can be obtained by <div>
Add the data-options="display_selector:# id "
id matches the id attribute and the value of the slider element, as examples:
Examples
<-! 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>
Combination of data options
The following example uses display_selector
and initial
data options:
Examples
<Span id = "mySlider"> </ span>
<Div class = "range-slider " data-slider data-options = "display_selector: #mySlider; initial: 20;">
<Span class = "range-slider -handle"> </ span>
<Span class = "range-slider -active-segment"> </ span>
</ Div>
Step? Long
By default, the slider is moved to reduce the increase in the number "1." You can add data-options="step: num ;"
;" attribute to modify the step value?. Example is set to 25:
Examples
<Span id = "mySlider"> </ span>
<Div class = "range-slider " data-slider data-options = "display_selector: #mySlider; step: 25;">
<Span class = "range-slider -handle"> </ span>
<Span class = "range-slider -active-segment"> </ span>
</ Div>
Custom interval
By default, the value in the range of "0" to "100." You can add-Options Data start
and end
to set interval values. The following examples set the interval value of "1" to "20":
Examples
<Span id = "mySlider"> </ span>
<Div class = "range-slider " data-slider data-options = "display_selector: #mySlider; start: 1; end: 20;">
<Span class = "range-slider -handle"> </ span>
<Span class = "range-slider -active-segment"> </ span>
</ Div>
Using the grid
Use the following to use the slider in the grid:
Examples
<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>
Use Input
The following example uses the <input>
replace <span>
to display the value of the slider:
Examples
<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>