Range

Range inputs with a filled track, a value bubble and tick marks.

Bootstrap’s range docs describe the markup and CSS.

Example

Put a bsRange range input in a bsRange wrapper. The wrapper keeps --bs-range-fill in sync with the value, which Bootstrap’s CSS uses to fill the track. Bootstrap needs its JavaScript for this, bootstrap-ng does it in Angular.

Example range

HTML

<div bsFormField>
  <label bsFormLabel>Example range</label>
  <div bsRange>
    <input type="range" bsRange />
  </div>
</div>

With Angular forms

Bind the input with [formControl], [(ngModel)] or [formField]. Values set from code update the fill too. The wrapper also emits valueChange with the numeric value.

Volume: 30

<div bsFormField>
  <label bsFormLabel>Volume: {{ volume.value }}</label>
  <div bsRange>
    <input type="range" bsRange [formControl]="volume" />
  </div>
</div>
<button
  type="button"
  bsButton="subtle"
  theme="secondary"
  class="mt-3"
  (click)="volume.setValue(100)">
  Turn it up
</button>

Theme colors

Set theme on the wrapper to color the filled track and the thumb. It defaults to primary.

HTML

<div class="vstack gap-3">
  <div bsRange theme="accent">
    <input type="range" bsRange aria-label="Accent range" />
  </div>
  <div bsRange theme="success">
    <input type="range" bsRange aria-label="Success range" />
  </div>
  <div bsRange theme="danger">
    <input type="range" bsRange aria-label="Danger range" />
  </div>
  <div bsRange theme="warning">
    <input type="range" bsRange aria-label="Warning range" />
  </div>
</div>

Disabled

Add disabled to the input.

Disabled range

HTML

<div bsFormField>
  <label bsFormLabel>Disabled range</label>
  <div bsRange>
    <input type="range" bsRange disabled />
  </div>
</div>

Min, max and steps

Set min, max and step on the input. They default to 0, 100 and 1.

Rating

HTML

<div bsFormField>
  <label bsFormLabel>Rating</label>
  <div bsRange>
    <input type="range" bsRange min="0" max="5" step="0.5" />
  </div>
</div>

Value bubble

Add bubble to the wrapper to show the value above the thumb, and pass a formatter to change its text. The bubble is hidden from screen readers, which announce the input’s value.

Brightness

<div bsFormField>
  <label bsFormLabel>Brightness</label>
  <div bsRange bubble [formatter]="percent">
    <input type="range" bsRange value="60" />
  </div>
</div>

Tick marks

Link a <datalist> with the input’s list attribute to render a tick for each option at its value. An option’s label is shown beneath its tick.

Temperature

HTML

<div bsFormField>
  <label bsFormLabel>Temperature</label>
  <div bsRange>
    <input type="range" bsRange step="25" value="50" list="rangeTicksList" />
  </div>
  <datalist id="rangeTicksList">
    <option value="0" label="Cold"></option>
    <option value="25"></option>
    <option value="50" label="Mild"></option>
    <option value="75"></option>
    <option value="100" label="Hot"></option>
  </datalist>
</div>

API

BsRange

Selector: div[bsRange] · Exported as: bsRange

Inputs

Name	Type	Default	Description
`bubble`	`boolean`	`false`	Shows a bubble with the value above the thumb.
`formatter`	`(value: number) => string`	`String`	Formats the value in the bubble.
`theme`	`BsTheme \| null`	`null`	Theme color of the filled track and thumb. Primary when not set.

Outputs

Name	Type	Description
`valueChange`	`number`	Emits the numeric value when the user or a form changes it.

Methods

Name	Type	Description
`value`	`Signal<number>`	Current numeric value.

BsRangeInput

Selector: input[type=range][bsRange] · Exported as: bsRangeInput

Inputs

Name	Type	Default	Description
`id`	`string`	`generated`	Element id. Generated when not set, and used for the field’s label.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles. auto follows the bound Angular form control.

Methods

Name	Type	Description
`update()`	`void`	Syncs the wrapper after you set the input’s value directly on the element.