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