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= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success"> w3wiki </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= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success"> w3wiki </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