Horje
Spectre Sliders

Sliders are used to drag a handle to select a numeric value. The sliders are for selecting values from ranges. You can add the tooltip class to have tooltip labels. If no data-tooltip is set, the value can be used instead. 

Spectre Sliders Class:

  • slider: This class is used to create sliders.

Syntax:

<input class="slider" type="..." 
    min="..." max="..." value="...">

Example 1: In this example, we will create a simple slider.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="text-success">
              GeeksforGeeks
          </h1>
        <strong>SPECTRE Sliders</strong>
        <br><br>
    </center>
    
    <div style="padding:10px;">
        <input class="slider" type="range" 
            min="0" max="100" value="75">
   
          <!-- Sliders with tooltips -->
        <input class="slider tooltip" 
            type="range" min="0" 
            max="100" value="25" 
            oninput="this.setAttribute('value', this.value);">
    </div>
</body>
</html>

Output: 

Spectre Sliders

Example 2:  In this example, we will create a simple tooltip slider.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="text-success">
              GeeksforGeeks
          </h1>
        <strong>SPECTRE Sliders</strong>
        <br><br>
    </center>
    
    <div style="padding:10px;">
       <!-- Sliders with tooltips -->
       <input class="slider tooltip" type="range" 
           min="0" max="100" value="25" 
           oninput="this.setAttribute('55', this.55);">
    </div>
</body>
</html>

Output:

Spectre Sliders

Reference:  https://picturepan2.github.io/spectre/experimentals/sliders.html




Reffered: https://www.geeksforgeeks.org


CSS

Related
Spectre Progress Spectre Progress
How to create a Triangle using CSS clip-path ? How to create a Triangle using CSS clip-path ?
Bulma Notification Variables Bulma Notification Variables
Blaze UI Basket Example Blaze UI Basket Example
Bulma Button Variables Bulma Button Variables

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
10