Foundation CSS Slider Basics
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. We can also display the slider value when we drag the slider. In this article, we will learn about Slider Basics.
Foundation CSS Slider Basics Classes:
- slider: It is used to create the slider.
- slider-handle: It is used to create the slider handle for dragging.
- slider-fill: It shows us how much slider is filled.
Syntax:
<div class="slider" data-slider>
<span class="slider-handle"
data-slider-handle role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
<input type="hidden">
</div>
Example 1: The following code demonstrates a basic slider.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Slider Basics</h3>
<div class="slider"
data-slider data-initial-start="1"
data-end="50">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the slider with a slider value.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Slider Basics</h3>
<div class="slider"
data-slider
data-initial-start="10"
data-end="100">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
<input type="number">
</div>
<br>
<div class="slider"
data-slider
data-initial-start="35"
data-end="200">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
<input type="number">
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/slider.html#basics
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...