Slider

Description

Sliders allow users to select a value from a range of values.

See live demos on storybook

Storybook Slider Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-slider @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

New in v5 Slider

• You now have the ability to use the slider as a range slider. See the Docs tab in Storybook for examples.
• New Props
  • range
    • Allows the slider to have two knobs to select a range value.
  • ariaLabel
    • Accessibility label for assistive technologies.
  • ariaLabelledBy
    • Sets the aria-labelledby attribute for the Slider. Used by assistive technology, such as screen readers, to name the slider for accessibility. Its value should be the id of the element that renders its label
  • ariaValuetext
    • Set this input attribute to a string that makes the slider value understandable, e.g. 'Monday'
  • valueToAriaValueTextFn
    • A function that maps the slider value to value of the aria-valuetext attribute on the thumb element. If not set, the aria-valuetext attribute is unchanged when the value changes.
  • leadingBlock
    • Content to be displayed in the leading block container. Supported types are icon, text, and input. If a string is sent for icon an Element Icon will be rendered.
  • trailingBlock
    • Content to be displayed in the trailing block container. Supported types are icon, text, and input. If a string is sent for icon an Element Icon will be rendered.
  • leadingBlockType
    • The type of media that will render in the leading block.
  • leadingBlockProps
    • Props to be added to the leading block node. For example, if an input is chosen you can send in variant: 'filled' to use a filled textfield.
  • leadingBlockStyle
    • Styles to be added to leading block div.
  • trailingBlockStyle
    • Styles to be added to trailing block div.
  • trailingBlockProps
    • Props to be added to the trailing block node. For example, if an input is chosen you can send in variant: 'filled' to use a filled textfield.
  • trailingBlockType
    • The type of media that will render in the trailing block.
  • onInput
    • Fired whenever the value of slider changes.

Breaking changes migrating to v5

• SliderScale component is no longer needed. Please use leadingBlock and trailingBlock props instead. See the props table for more information.
• variant prop has been renamed to themeColor

Slider Props

| Name | Type | Default | Required | Description | | ------------------ | ---------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ariaLabel | string | null | false | Accessibility label for assistive technologies. | | ariaLabelledBy | string | null | false | Id of the component being labeled for assistive technologies. | | ariaValuetext | string | null | false | Set this input attribute to a string that makes the slider value understandable, e.g. 'Monday'. | | className | string | undefined | false | The css class name to be passed through to the component markup. | | disabled | boolean | false | false | Prevent user interaction. | | discrete | boolean | false | false | Discrete sliders display a numeric value label when the slider control is focused, which allows a user to input an exact value. | | displayMarkers | boolean | false | false | Display tracker markers with discrete slider only. | | id | string | null | false | ID for html input. May be overwritten. | | leadingBlockProps | object | null | false | Props to be added to the leading block node. For example, if an input is chosen, this is where you should send the input value and you can send in variant: 'filled' to use a filled textfield. | | leadingBlockStyle | object | null | false | Styles to be added to leading block div. | | leadingBlockType | string | null | false | The type of media that will render in the leading block.Accepted Values: icon, input, text | | max | number | 100 | false | The maximum value a slider can have. | | min | number | 0 | false | The minimum value a slider can have. | | minValue | number|string|object | '0' | false | When using the range slider, this is the value of the minimum knob of the slider. The maximum value will use the standard value prop. | | range | boolean | false | false | Allows the slider to have two knobs to select a range value. | | step | number | 1 | false | Specifies the increments at which a slider value can be set. Can be any positive number. | | themeColor | string | 'primary' | false | Slider color theme.Accepted Values: primary, secondary | | trailingBlockProps | object | null | false | Props to be added to the trailing block node. For example, if an input is chosen, this is where you should send the input value and you can send in variant: 'filled' to use a filled textfield. | | trailingBlockStyle | object | null | false | Styles to be added to trailing block div. | | trailingBlockType | string | null | false | The type of media that will render in the trailing block.Accepted Values: icon, input, text | | value | number|string|object | null | false | The current value of the slider. If the slider is a range slider, it will be the max value of the slider. |

Slider Render Props

| Name | Type | Default | Required | Description | | ------------- | --------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | leadingBlock | React.ReactNode | null | false | Custom content to be displayed in the leading block container. See leadingBlockType for types supported. If a string is sent for a icon an Element Icon will be rendered | | trailingBlock | React.ReactNode | null | false | Custom content to be displayed in the trailing block container. See trailingBlockType for types supported. If a string is sent for icon an Element Icon will be rendered. |

Slider Events

| Name | Default | Required | Params | Description | | -------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | | onChange | null | false | 1. Name: detail, Type: object, Description: Contains the new value and which thumb is moved.,2. Name: event, Type: object, Description: The javascript event | Fired when the slider is blurred after the value of slider changes. | | onInput | null | false | 1. Name: detail, Type: object, Description: Contains the new value and which thumb is moved.,2. Name: event, Type: object, Description: The javascript event | Fired whenever the value of slider changes. |

Slider Breaking Changes

| Description | | --------------------------------------------------------- | | label (removed): Use ariaLabel or ariaLabelledBy instead. | | variant (removed): use themeColor instead. |