1. Home
  2. Foundation slider

The best Foundation slider Tutorial In 2024, In this tutorial you can learn Fillet and disable slider,Vertical slider,Slider value,

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>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation slider
10/30