Foundation CSS Slider Data Binding
Last Updated :
09 Mar, 2022
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Slider is used to specify the range of slider when we drag it up/down or left/right. We can set any value on the slider by dragging the handle of the slider. Slider Data Binding is used to connect the slider with the input tag. When we drag the handle then the slider value will be displayed inside the input text field in real-time. If we change the value inside the input field then the slider handle will jump to the given value position on the slider. In this article, we will discuss Slider Data Binding in Foundation CSS.
Foundation CSS Slider Data Binding class:
- slider: This class is used to create the slider.
Syntax:
<div class="slider" data-slider>
<span class="slider-handle" data-slider-handle
role="slider" aria-controls="sliderValue">
</span>
<span class="slider-fill" data-slider-fill></span>
</div>
<input type="number" id="sliderValue">
Example 1: The following code demonstrates the Slider Data Binding.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"
/>
<script src=
</script>
<script src=
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h1 style="color:green"> GeeksforGeeks </h1>
<h3> Foundation CSS Slider Data Binding </h3>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider" data-slider
data-initial-start="15">
<span class="slider-handle" data-slider-handle
role="slider" tabindex="1"
aria-controls="sliderValue">
</span>
<span class="slider-fill" data-slider-fill>
</span>
</div>
</div>
<div>
<input type="number" id="sliderValue">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Slider Data Binding with a step size slider.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"
>
<script src=
</script>
<script src=
crossorigin="anonymous" >
</script>
</head>
<body>
<center>
<h1 style="color:green"> GeeksforGeeks </h1>
<h3> Foundation CSS Slider Data Binding</h3>
<strong>
Step size: 10
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider" data-slider
data-initial-start="20" data-step="10">
<span class="slider-handle" data-slider-handle
role="slider" tabindex="1"
aria-controls="sliderValue1">
</span>
<span class="slider-fill" data-slider-fill>
</span>
</div>
</div>
<div>
<input type="number" id="sliderValue1">
</div>
</div>
<strong>
Step size: 8
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider" data-slider
data-initial-start="24" data-step="8">
<span class="slider-handle" data-slider-handle
role="slider" tabindex="2"
aria-controls="sliderValue2">
</span>
<span class="slider-fill" data-slider-fill>
</span>
</div>
</div>
<div>
<input type="number" id="sliderValue2">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/slider.html#data-binding
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...