The Foundation slider allows you to drag to select an interval value:
The slider can be used by using the
<div
class="range-slider"
data-slider>
Create. In
<div>
Inside, add two
<span>
Elements:
<span
class="range-slider-handle">
Create a rectangular slider (blue background)
<span
class="range-slider-active-segment">
It is the gray bar behind the slider, which is the area where the slider is dragged.
注意: The slider needs to use JavaScript. So you need to initialize Foundation JS: 尝试一下 » Use 尝试一下 » Use 尝试一下 » By default, the slider is placed in the middle of the bar (the value is “50”). Can be done by adding 尝试一下 » If we need to display values in real time as the slider is dragged, we can use the 尝试一下 » The following example uses the 尝试一下 » 默认情况下，滑块滑动的增加减少的数量为 “1”。可以通过添加 尝试一下 » By default, the range values are “0” to “100”. You can add data-options 尝试一下 » The following is used to use the slider in the mesh: 尝试一下 » The following examples use the 8.26.1. Example ¶
<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 ¶
.radius
And
.round
Class to add fillet sliders. Use
.disabled
Class to disable the slider: 8.26.2. Example ¶
<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 slider ¶
.vertical-range
Class and
data-options="vertical:
true;"
To create a vertical slider: 8.26.3. Example ¶
<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 ¶
data-options="initial:
num"
Property to modify the default value: 8.26.4. Example ¶
<div class="range-slider" data-slider data-options="initial: 80;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Show slider valu ¶
<div>
Add in
data-options="display_selector:#id"
Attribute and the element id value matches the id of the slider, as shown in the following example: 8.26.5. Example ¶
<!-- 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>
Combined data option ¶
display_selector
And
initial
Data options: 8.26.6. Example ¶
<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>
步长 ¶
data-options="step:
num;"
属性来修改步长值。实例中设置为 25: 8.26.7. Example ¶
<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 ¶
start
And
end
To set the interval value. The following example sets the range value from “1” to “20”: 8.26.8. Example ¶
<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>
Working with Grid ¶
8.26.9. Example ¶
<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 ¶
<input>
Replace
<span>
To display the value of the slider: 8.26.10. Example ¶
<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>