Foundation CSS Slider Non-linear value translation
Last Updated :
10 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.
The 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 Non-linear value translation is used to focus the important values on the slider. When the slider focuses on the higher values then we use the log type position value function and when the slider focus on the lower values then we use the pow type position value function. In this article, we will discuss the Slider Non-linear value translation in Foundation CSS.
Foundation CSS Slider Non-linear value translation Attribute:
- data-position-value-function: It is used to focus the important values on the slider. When we assign a log function to it then it will focus on higher values and when we assign the pow function then lower values will be focused.
Syntax:
<div class="slider"
data-slider
data-position-value-function="VALUE" >
<span class="slider-handle" data-slider-handle
role="slider" tabindex="1" aria-controls="">
</span>
</div>
Example 1: The following code demonstrates the Slider Non-linear value translation using the log function.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Slider Non-linear value translation
</h3>
<strong>
Using log function:
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider"
data-slider
data-position-value-function="log">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
aria-controls="slider-value">
</span>
</div>
</div>
<div>
<input type="number" id="slider-value">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Slider Non-linear value translation
Example 2: The following code demonstrates the Slider Non-linear value translation using the pow function.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Slider Non-linear value translation
</h3>
<strong>
Using pow function:
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider"
data-slider
data-position-value-function="pow">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1"
aria-controls="slider-value">
</span>
</div>
</div>
<div>
<input type="number"
id="slider-value">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Slider Non-linear value translation
Reference: https://get.foundation/sites/docs/slider.html#non-linear-value-translation
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...