Foundation Slider
Foundation Slider is used to select a value within a certain range. This chapter introduces various usages of sliders.
Basic Slider
html
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>Slider with Input
html
<div class="grid-x grid-padding-x">
<div class="cell small-10">
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="sliderOutput">
</div>
</div>Dual Slider (Range Selection)
html
<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
</div>Vertical Slider
html
<div class="slider vertical" data-slider data-initial-start="50" data-vertical="true" style="height: 200px;">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>Configuration Options
html
<div class="slider" data-slider
data-initial-start="50"
data-start="0"
data-end="100"
data-step="5"
data-decimal="0">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>| Option | Description | Default |
|---|---|---|
data-initial-start | Initial value | 0 |
data-start | Minimum value | 0 |
data-end | Maximum value | 100 |
data-step | Step value | 1 |
data-decimal | Decimal places | 2 |
data-vertical | Vertical direction | false |
Custom Styles
html
<style>
.slider.success .slider-fill { background: #3adb76; }
.slider.success .slider-handle { background: #3adb76; }
.slider.warning .slider-fill { background: #ffae00; }
.slider.warning .slider-handle { background: #ffae00; }
.slider.alert .slider-fill { background: #cc4b37; }
.slider.alert .slider-handle { background: #cc4b37; }
</style>JavaScript API
javascript
// Get slider value
var slider = new Foundation.Slider($('#mySlider'));
var value = $('#mySlider').attr('data-slider');
// Listen for changes
$('#mySlider').on('moved.zf.slider', function() {
console.log('Slider value:', $(this).attr('data-slider'));
});Complete Example
html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Slider Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<style>
.demo-section { margin-bottom: 40px; padding: 20px; background: #f8f8f8; }
.demo-section h3 { margin-bottom: 20px; }
.slider.success .slider-fill, .slider.success .slider-handle { background: #3adb76; }
.slider.warning .slider-fill, .slider.warning .slider-handle { background: #ffae00; }
.slider.alert .slider-fill, .slider.alert .slider-handle { background: #cc4b37; }
</style>
</head>
<body>
<div class="grid-container">
<h1>Foundation Slider Showcase</h1>
<div class="demo-section">
<h3>Basic Slider</h3>
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="demo-section">
<h3>Slider with Input</h3>
<div class="grid-x grid-padding-x">
<div class="cell small-10">
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="output1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="output1">
</div>
</div>
</div>
<div class="demo-section">
<h3>Range Slider</h3>
<div class="grid-x grid-padding-x">
<div class="cell small-2">
<input type="number" id="rangeStart">
</div>
<div class="cell small-8">
<div class="slider" data-slider data-initial-start="20" data-initial-end="80">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="rangeStart"></span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="rangeEnd"></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="rangeEnd">
</div>
</div>
</div>
<div class="demo-section">
<h3>Custom Colors</h3>
<label>Success</label>
<div class="slider success" data-slider data-initial-start="70">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<label>Warning</label>
<div class="slider warning" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<label>Alert</label>
<div class="slider alert" data-slider data-initial-start="30">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="demo-section">
<h3>Step Slider</h3>
<p>Step value: 10</p>
<div class="grid-x grid-padding-x">
<div class="cell small-10">
<div class="slider" data-slider data-initial-start="50" data-step="10">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="stepOutput"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="stepOutput">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>Summary
In this chapter, we learned about basic sliders, range sliders, vertical sliders, and custom styling.
Next, we will learn about Foundation Tooltips.