Skip to content
Related Articles

Related Articles

Foundation CSS Slider Sass Reference

Improve Article
Save Article
  • Last Updated : 19 Sep, 2022
Improve Article
Save Article

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 values for the slider. It is useful on websites where the rating or quality of something needs to be selected within a range.

Variable Used:

Variable-Name Description Type Default-Value
$slider-width-vertical  This variable is used to define the default slider width of a vertical slider.  Number 0.5rem
$slider-transition  This variable is used to define the transition properties to apply to the slider handle and fill. Transition all 0.2s ease-in-out 

 

Example 1: In the below code, we will make use of the above variable to demonstrate the use of Slider.

HTML




<!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>
  
  <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <h3>A computer science portal for geeks</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>


SASS Code:

$slider-width-vertical: 0.5rem;
.slider {
    width:$slider-width-vertical;
}

Compiled CSS Code:

.slider {
    width: 0.5rem; 
}

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of Slider.

HTML




<!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>
  
  <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <h3>A computer science portal for geeks</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>


SASS Code:

$slider-width-vertical: 0.5rem;
.slider {
    width:$slider-width-vertical;
}

Compiled CSS Code:

.slider {
    width: 0.5rem; 
}

Output:

 

Reference: https://get.foundation/sites/docs/slider.html


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!