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:
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:
Reference: https://picturepan2.github.io/spectre/experimentals/sliders.html
Contact Us