Foundation CSS Slider Two Handles
Last Updated :
02 Mar, 2022
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. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for apps allows you to build fully responsive web applications.
Slider is used to specify the range of values when we drag the slider. Slider Two Handles means the slider is having two dragging handles and we can drag both the handles. A two-handle slider is used to define a range of values versus a single given value. We can create both horizontal and vertical two-handle sliders. To make two handle sliders, use two elements with a slider-handle class and two input elements.
In this article, we will discuss how to create the two-handle slider in Foundation CSS.
Foundation CSS Slider Two Handles class:
- slider-handle: It is used to create the slider handle.
Syntax:
<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>
...
</div>
Example 1: The following code demonstrates the horizontal slider with two handles.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous" />
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Foundation CSS Slider Two Handles</h3>
<div class="slider" data-slider
data-initial-start="15"
data-initial-end="83">
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<span class="slider-fill"
data-slider-fill></span>
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<input type="hidden" />
<input type="hidden" />
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the vertical slider with two handles.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous" />
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Foundation CSS Slider Two Handles</h3>
<div class="slider vertical"
data-slider data-initial-start="28"
data-initial-end="90" data-vertical="true">
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<input type="hidden" />
<input type="hidden" />
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/slider.html#two-handles
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...