The range input component is used to allow the user to select a value within a specified range of values.
Example
Allows users to select a numeric value within a range using a slider.
code
<script type="module">
import '@blueprintui/components/include/range.js';
</script>
<bp-field>
<label>range</label>
<bp-range></bp-range>
<bp-field-message>message text</bp-field-message>
</bp-field>Vertical
Demonstrates the range slider in vertical form layout.
code
<bp-form-group layout="vertical">
<bp-field layout="vertical">
<label>label</label>
<bp-range></bp-range>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="vertical">
<label>disabled</label>
<bp-range disabled></bp-range>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="error">
<label>error</label>
<bp-range></bp-range>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="success">
<label>success</label>
<bp-range></bp-range>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Horizontal
Demonstrates the range slider in horizontal form layout.
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-range></bp-range>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-range disabled></bp-range>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-range></bp-range>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-range></bp-range>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Compact
Demonstrates the range slider in compact form layout.
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-range></bp-range>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-range disabled></bp-range>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error</label>
<bp-range></bp-range>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success</label>
<bp-range></bp-range>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Install
NPM
// npm package
import '@blueprintui/components/include/range.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/range.js/+esm';
</script>Accessibility
- The range input component should be fully accessible to users using keyboard navigation.
- When a user navigates to the range input component, they should be able to adjust the value by using the arrow keys.
- The range input component should also be labeled and provide a clear indication of the current value, minimum and maximum values, and what the range input represents to users.
bp-range
Events
| Name | Types | Description |
|---|---|---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
| Name | Types | Description |
|---|
CSS Properties
| Name | Types | Description |
|---|---|---|
--accent-color | ||
--height |
Slots
| Name | Types | Description |
|---|---|---|
prefix | slot for prefix text or icons | |
suffix | slot for suffix text or icons | |
default | slot for range input |