@element-public/react-slider NPM

Slider

Description

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

See live demos on storybook

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.

clsx prop-types @material/slider @babel/runtime-corejs3 @element-public/react-icon @element-public/react-common @element-public/react-textfield

@element-public/react-table @element-public/react-components

1.0.0

11 months ago