Foundation CSS Native Range Slider

Last Updated : 17 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. 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 Native Range Slider helps to set specific values within a range. It allows specifying the range value by dragging a small circular bar. It has a minimum and maximum value for the slider. It is equivalent to <input type=”range”>, the native HTML element for range sliders. It does not require JavaScript. It is useful on websites where the rating or quality of something needs to be selected within a range.

Foundation CSS Native Range Slider attributes :

min: The minimum value of the slider.
max: The maximum value of the slider.
steps: It specifies the interval between legal numbers in an <input> element.
disabled: Disables the native range slider.

Syntax :

<input type="range" min=".." max=".." step="..">

Example 1: The following example code demonstrates the Native Range Slider in Foundation CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Foundation CSS Native Range Slider</title> 
  <!-- Compressed CSS -->
  <link rel="stylesheet" 
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous" /> 
</head> 
  
<body> 
  <center> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <h3>Foundation CSS Native Range Slider</h3> 
    <input type="range"
           min="1"
           max="100" 
           step="1"> 
  </center> 
</body> 
  
</html>

Output:

Foundation CSS Native Range Slider

Example 2 : The following code demonstrates the Native Range Slider with disabled attribute in Foundation CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Foundation CSS Native Range Slider disabled</title> 
  <!-- Compressed CSS -->
  <link rel="stylesheet"  
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"/> 
</head> 
  
<body> 
  <center> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <h3>Foundation CSS Native Range Slider disabled</h3> 
    <input type="range"
           min="1" 
           max="100" 
           step="1"
           disabled> 
  </center> 
</body> 
  
</html>