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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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:
Example 2: In this example, we will create a simple tooltip slider.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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:
Reference: https://picturepan2.github.io/spectre/experimentals/sliders.html