blob: 69e9be6c4ae50d38d692de3d474d24ddc8a50377 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'sliders'
- var parent = 'experimentals'
- var title = 'Sliders - Experimentals - Spectre.css CSS Framework'
- var description = 'The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('sliders', 'Sliders')
include ../_layout/_ad-g.pug
p The Sliders are for selecting values from ranges.
p
| You can add the class #[code tooltip] to have tooltip labels.
| If no #[code data-tooltip] is set, the #[code value] will be used instead.
.docs-demo.columns
.column.col-6.col-xs-12
input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
.column.col-6.col-xs-12
input.slider(type="range" min="0" max="100" value="50" disabled="")
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- Sliders -->
<input class="slider" type="range" min="0" max="100" value="50">
<!-- Sliders with tooltips -->
<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
