---
title: Range
desc: A range input allows users to select a value from a specified range.
ico: mdi:slider
keywords:
  - input
  - slider

props:
  - class: .prs-range
    type: component
    desc: For <input> or <label>
  - class: .prs-range-secondary
    type: modifier
    desc: Secondary variant
  - class: .prs-range-accent
    type: modifier
    desc: Accent variant
  - class: .prs-range-info
    type: modifier
    desc: Blue variant
  - class: .prs-range-success
    type: modifier
    desc: Green variant
  - class: .prs-range-warning
    type: modifier
    desc: Yellow variant
  - class: .prs-range-danger
    type: modifier
    desc: Red variant
  - class: .prs-range_focus
    type: state
    desc: Manually apply visual focus
  - class: .prs-range_disabled
    type: state
    desc: Manually apply visual disabled

controls:
  - name: label
    type: text
    label: Label
    desc: As always, keep it simple.
    default: Label
  - name: value
    type: range
    min: 0
    max: 100
    step: 1
    label: Value
    desc: 0-100.
    default: 25
  - name: showValue
    type: toggle
    label: Show value
    desc: Show value in the lower left form-control label slot. The value can be placed in any of the four slots. This is just an example.
    default: false
  - name: variant
    type: radio
    label: Variant
    desc: Color variants.
    default: default
    options:
      - default
      - secondary
      - accent
      - info
      - success
      - warning
      - danger
  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup.
    default: default
    options:
      - default
      - focus
      - disabled

preview: |
  <div class="w-screen max-w-xs">
    <label class="form-control">
      <span x-show="label.length" class="prs-label">
        <span class="prs-label-text" x-text="label"></span>
      </span>
      <input
        type="range"
        min="1"
        max="100"
        x-model="value"
        step="1"
        class="prs-range"
        :class="{
          'prs-range-secondary': variant === 'secondary',
          'prs-range-accent': variant === 'accent',
          'prs-range-info': variant === 'info',
          'prs-range-success': variant === 'success',
          'prs-range-warning': variant === 'warning',
          'prs-range-danger': variant === 'danger',
          'prs-range_focus': state === 'focus',
        }"
        aria-label="Label"
        :disabled="state === 'disabled'" />
    </label>
    <span x-show="showValue" class="prs-label">
      <span class="prs-label-text"><span x-text="value"></span> <em class="text-xs"> / 100</em></span>
    </span>
  </div>

code:
  html: |
    <label class="prs-form-control">
      {showLabel}<input
        type="range"
        min="1"
        max="100"
        step="1"
        value="{value}"
        class="prs-range{variant}{focus}"{ariaLabel}{disabled}
      />{showValue}
    </label>
  logic:
    showLabel: "this.label !== '' ? '<span class=\"prs-label\">\\n    <span class=\"prs-label-text\">{label}</span>\\n  </span>\\n  ' : ''"
    showValue: "this.showValue ? '\\n  <span class=\"prs-label\">\\n    <span class=\"prs-label-text\">{value}</span>\\n  </span>' : ''"
    ariaLabel: "this.label === '' ? '\\n    aria-label=\"Label goes here...\"' : ''"
    label: "this.label"
    value: "this.value"
    variant: "this.variant !== 'default' ? ' prs-range-'+ this.variant : ''"
    focus: "this.state === 'focus' ? ' prs-range_focus' : ''"
    disabled: "this.state === 'disabled' ? '\\n    disabled' : ''"

---