Range

The range input component is used to allow the user to select a value within a specified range of values.

Example

range

message text

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

label

message text

disabled

disabled message

error

error message

success

success message

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

label

message text

disabled

disabled message

error

error message

success

success message

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

label

message text

disabled

disabled message

error

error message

success

success message

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
`value`	`string \| number \| FormData \| File`	determines initial value of the control
`step`	`number`	number that specifies the granularity that the value
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters
`formAssociated`	`boolean`
`valueAsNumber`
`composedLabel`
`focus`
`reset`

Attributes

Name	Types	Description
`value`	`string \| number \| FormData \| File`	determines initial value of the control
`step`	`number`	number that specifies the granularity that the value
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters

CSS Properties

Name	Types	Description
`--accent-color`
`--height`

Slots

Name	Types	Description
`prefix`		slot for prefix text or icons
`suffix`		slot for suffic text or icons