extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/forms/range/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Forms'},
      'Range'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/forms/range/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Range
        .card-body
          p.text-body-secondary.small
            | Create custom 
            code
              = '<input type="range">'
            |  controls with 
            code .form-range
            | .
          +example('https://coreui.io/docs/forms/range/#overview')
            label.form-label(for='customRange1') Example range
            input.form-range#customRange1(type='range')
    .col-12
      .card.mb-4
        .card-header
          strong Range
          span.small.ms-1 Disabled
        .card-body
          p.text-body-secondary.small
            | Add the 
            code disabled
            |  boolean attribute on an input to give it a grayed out appearance and remove pointer events.
          +example('https://coreui.io/docs/forms/range/#disabled')
            label.form-label(for='disabledRange') Disabled range
            input.form-range#disabledRange(type='range' disabled)
    .col-12
      .card.mb-4
        .card-header
          strong Range
          span.small.ms-1 Min and max
        .card-body
          p.text-body-secondary.small
            | Range inputs have implicit values for 
            code min
            |  and 
            code max
            | — 
            code 0
            |  and 
            code 100
            | , respectively. You may specify new values for those using the 
            code min
            |  and 
            code max
            |  attributes.
          +example('https://coreui.io/docs/forms/range/#min-and-max')
            label.form-label(for='customRange2') Example range
            input.form-range#customRange2(type='range' min='0' max='5')
    .col-12
      .card.mb-4
        .card-header
          strong Range
          span.small.ms-1 Steps
        .card-body
          p.text-body-secondary.small
            | By default, range inputs “snap” to integer values. To change this, you can specify a 
            code step
            |  value. In the example below, we double the number of steps by using 
            code step="0.5"
            | .
          +example('https://coreui.io/docs/forms/range/#steps')
            label.form-label(for='customRange3') Example range
            input.form-range#customRange3(type='range' min='0' max='5' step='0.5')