Foundation CSS Slider Vertical
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. This 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. We can create the slider to set the range and users can choose any value by dragging the slider. Slider Vertical is used to create the vertical slider and we can set the initial and ending value of the slider and set the attribute data-vertical=”true” to work it perfectly.
In this article, we will discuss how to create the vertical slider in Foundation CSS.
Foundation CSS Slider Vertical class:
- vertical: It is used to create the slider in the vertical direction.
Syntax:
<div class="slider vertical" data-slider
data-initial-start="1" data-end="100"
data-vertical="true">
...
</div>
Example 1: The following code demonstrates the vertical slider.
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 Vertical</h3>
<div class="slider vertical"
data-slider data-initial-start="1"
data-end="100" data-vertical="true">
<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 vertical slider with a slider value.
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 Vertical</h3>
<div class="slider vertical"
data-slider data-initial-start="1"
data-end="100" data-vertical="true">
<span class="slider-handle"
data-slider-handle role="slider"
aria-controls="slidervalue">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
</div> <br>
<strong>Value is:</strong>
<input type="number" class="button"
name="" id="slidervalue">
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/slider.html#vertical
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...