Summary Files Commits Branches @commit @diff @stats
path: root / docs / src / contents / sliders.pug
blob: 754833c5756a29149987c61f48a9a603429c24c1 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
p 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);">