Spectre Sliders
Last Updated :
17 Aug, 2022
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">
<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;">
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...