Range

A range input allows users to select a value from a specified range.

Class name Type
.prs-range Component For <input> or <label>
.prs-range-info Modifier Blue variant
.prs-range-success Modifier Green variant
.prs-range-warning Modifier Yellow variant
.prs-range-danger Modifier Red variant
.prs-range_focus State Manually apply visual focus
.prs-range_disabled State Manually apply visual disabled

  • Default 

    <div class="w-96 max-w-xs space-y-5"> <!-- <- this is just for demo purposes -->

  <label><input type="range" min="0" max="100" value="50" class="prs-range" aria-label="Range" /></label>

  <div>
    <label><input type="range" min="1" max="5" step="1" value="2" class="prs-range" aria-label="Range" /></label>
    <div class="p-1 w-full text-(gray-500 xs) font-mono [font-variant-numeric:tabular-nums] flex justify-between pointer-events-none select-none" aria-hidden="true"> <!-- <- this is just for demo purposes -->
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
    </div>
  </div>

</div>

  • Info 

    <div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-info" aria-label="Range" /></label>
</div>

  • Success 

    <div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-success" aria-label="Range" /></label>
</div>

  • Warning 

    <div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-warning" aria-label="Range" /></label>
</div>

  • Danger 

    <div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-danger" aria-label="Range" /></label>
</div>

  • Focus 

    <div class="w-96 max-w-xs space-y-5 [&>:where(label:not(.prs-form-control))]:(w-full block)"> <!-- <- this is just for demo purposes -->
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range_focus" aria-label="Range" /></label>
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-info prs-range_focus" aria-label="Range" /></label>
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-success prs-range_focus" aria-label="Range" /></label>
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-warning prs-range_focus" aria-label="Range" /></label>
  <label><input type="range" min="0" max="100" value="50" class="prs-range prs-range-danger prs-range_focus" aria-label="Range" /></label>
</div>

  • Disabled 

    <div class="w-96 max-w-xs"> <!-- <- this is just for demo purposes -->
  <label><input type="range" min="0" max="100" value="50" class="prs-range" aria-label="Range" disabled /></label>
</div>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-range {
  --filler: var(--prs-c-primary);
  --filler-size: 100rem;
  --filler-offset: 0.6rem;
  appearance: none;
  width: 100%;
  height: 1rem;
  background: transparent;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 9999px;
}

.prs-range::-webkit-slider-runnable-track {
  appearance: none;
  width: 100%;
  height: 0.5rem;
  background-color: var(--prs-c-gray-300);
  align-items: center;
  border-radius: 9999px;
}

.prs-range::-moz-range-track {
  appearance: none;
  width: 100%;
  height: 0.5rem;
  background-color: var(--prs-c-gray-300);
  align-items: center;
  border-radius: 9999px;
}

.prs-range::-webkit-slider-thumb {
  appearance: none;
  border-style: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--prs-c-white);
  color: var(--filler);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 9999px;
  box-shadow: 0 0 0 3px var(--filler) inset, 0 0, calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);
}

.prs-range::-moz-range-thumb {
  --filler-offset: 0.5rem;
  appearance: none;
  border-style: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--prs-c-white);
  color: var(--filler);
  position: relative;
  top: 50%;
  border-radius: 9999px;
  box-shadow: 0 0 0 3px var(--filler) inset, 0 0, calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);
}

.prs-range-info {
  --filler: var(--prs-c-info);
}

.prs-range-success {
  --filler: var(--prs-c-success-700);
}

.prs-range-warning {
  --filler: var(--prs-c-warning-700);
}

.prs-range-danger {
  --filler: var(--prs-c-danger);
}

.prs-range:focus-visible,.prs-range:where(.prs-range_focus) {
  outline: 2px solid var(--filler);
  outline-offset: 1px;
}

.prs-range:disabled {
  --filler: var(--prs-c-gray-400);
  background-color: transparent;
  cursor: not-allowed;
}

Coming soon...