Foundation CSS Slider Disabled
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 Disabled is used to disable the slider and slider handle. It means we cannot drag the slider when the slider is disabled.
In this article, we will discuss how to create the disabled slider in Foundation CSS.
Foundation CSS Slider Disabled class:
- disabled: It is used to disable the slider.
Syntax:
<div class="slider disabled" data-slider>
<span class="slider-handle" data-slider-handle role="slider">
</span>
<span class="slider-fill" data-slider-fill></span>
</div>
Example 1: The following code demonstrates the horizontal slider disabled.
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 Disabled</h3>
<div class="slider disabled"
data-slider data-initial-start="25">
<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 disabled.
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>
<strong>Foundation CSS Slider Disabled</strong></br>
<div class="slider vertical disabled"
data-slider data-initial-start="55">
<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:
Reference: https://get.foundation/sites/docs/slider.html#disabled
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...