Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS Slider helps to set specific values within a range. It allows specifying the range value by dragging a small bar. It also has starting and maximum value for the slider. It is useful on websites where the rating or quality of something needs to be selected within a range.
Foundation CSS Slider classes:
- slider-handle: This class is used to set the handle that the user drags. The slider can also have two handles having two dragging handles and we can drag both the handles.
- slider-fill: This class is used to set the fill which resizes dynamically as per the handle.
- slider: This class is used to set the slider. Slider vertical is used to create the vertical slider and we can set the initial and ending value of the slider. Slider Data Binding is used to connect the slider with the input tag.
Note: The Foundation CSS slider attributes are applied to the container element.
Foundation CSS Slider Attributes:
- data-initial-start: It represents the start position of the slider.
- data-end: It represents the maximum range value of the slider.
Syntax:
<div class="slider" ...> <span class="slider-handle" ...></span> <span class="slider-fill" ...></span> <input type="hidden"> </div>
Example 1: The following code demonstrates the slider in Foundation CSS.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Slider</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
crossorigin="anonymous" />
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>Foundation CSS Slider</h3>
<div class="slider" data-slider data-initial-start="50" 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="hidden">
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Slider
Example 2: The following code demonstrates the slider with value in Foundation CSS.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Slider</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
crossorigin="anonymous" />
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>Foundation CSS Slider</h3>
<div class="slider" data-slider data-initial-start="50" data-end="200">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill></span>
<br>
<strong>Value is:</strong>
<input type="number" class="button" name="" id="slidervalue">
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Slider
Reference: https://get.foundation/sites/docs/slider.html