Foundation CSS Kitchen Sink Slider

Last Updated : 25 Feb, 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.

Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. Slider is used to specify the range of values when we drag the slider. It is used when we want to set the range and the user can choose the range from the slider.

Used classes:

slider: It is used to create the slider.
slider-handle: It is used to create the slider handle.
slider-fill: It is used to fill the slider.

Syntax:
<div class="slider" data-slider data-initial-start="1" data-end="100">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

Example 1: The following code demonstrates the horizontal kitchen sink slider.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>Foundation CSS Kitchen Sink</title> 
  
    <link
      rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"
    /> 
    <script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
      crossorigin="anonymous"
    ></script> 
    <link
      rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    /> 
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs=sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin="anonymous"
    ></script> 
  </head> 
  
  <body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h3>Foundation CSS Kitchen Sink Slider</h3> 
  
      <div class="slider" data-slider data-initial-start="1" data-end="100"> 
        <span
          class="slider-handle"
          data-slider-handle 
          role="slider"
          tabindex="1"
        ></span> 
        <span class="slider-fill" data-slider-fill></span> 
        <input type="hidden" /> 
      </div> 
      <div class="slider" data-slider data-initial-start="20" data-end="150"> 
        <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> 

Output:

Example 2: The following code demonstrates the vertical kitchen sink slider.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>Foundation CSS Kitchen Sink</title> 
  
    <link
      rel="stylesheet"
      href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"
    /> 
    <script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
      crossorigin="anonymous"
    ></script> 
    <link
      rel="stylesheet"
      href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    /> 
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs=sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin="anonymous"
    ></script> 
  </head> 
  
  <body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h3>Foundation CSS Kitchen Sink Slider</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> 
        <input type="hidden" /> 
      </div> 
      <div
        class="slider vertical"
        data-slider 
        data-initial-start="15"
        data-end="150"
        data-vertical="true"
      > 
        <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> 