lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

Example

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

message textdisabled messageerror messagesuccess 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

message textdisabled messageerror messagesuccess 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

message textdisabled messageerror messagesuccess 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

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
valuestring | number | FormData | Filedetermines initial value of the control
stepnumbernumber that specifies the granularity that the value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
typestringstring specifying the type of control to render
namestringrepresents the name of the current
element as a string.
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters
formAssociatedboolean
valueAsNumber
composedLabel
focus
reset

Attributes

NameTypesDescription
valuestring | number | FormData | Filedetermines initial value of the control
stepnumbernumber that specifies the granularity that the value
disabledbooleandetermines if element is mutable or focusable
requiredbooleanindicates that the user must specify a value for the input before the owning form can be submitted
readonlybooleanmakes the element not mutable, meaning the user can not edit the control
multiplebooleandetermines he form control accepts one or more values
autocompletestringprovide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
typestringstring specifying the type of control to render
patternstringregular expression the form control's value should match
placeholderstringdefines a short hint to help the user with data entry when a form control has no value
minLengthnumberdefines minimum number of characters
maxLengthnumberdefines maximum number of characters
minnumberdefines the most negative value in the range of permitted values
maxnumberdefines the greatest value in the range of permitted values
sizenumberdetermines number of characters

CSS Properties

NameTypesDescription
--accent-color
--height

Slots

NameTypesDescription
prefixslot for prefix text or icons
suffixslot for suffic text or icons