Slider component

[bmdalex]

Slider component

Related to #1255

Description

• a slider is an input that allows the user to choose a value from within a specific range of values
• sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider.

API proposal v1

• defaultValue?: number | string | string[] - The value of the slider.

• disabled?: boolean- A slider can be read-only and unable to change states.

• discrete?: boolean (alternatives: segmented, dotted) - Whether the slider has discrete styling or not.

• fluid?: boolean - A slider can take the width of its container.

• input?: ShorthandValue - Shorthand for the input component.

• max?: string | number - The greatest value in the range of permitted values.

• min?: string | number - The lowest value in the range of permitted values.

• vertical?: boolean - The slider orientation. Horizontal by default.

• step?: string | number - A number that specifies the granularity that the value must adhere to or the special value any.

• inputRef?: React.Ref<HTMLElement> - Ref for input DOM node.

• onChange?: ComponentEventHandler<SliderProps> - Change event handler.

• value?: number | string | string[] - The value of the slider.

v2:

• items / marks prop

These are predetermined values to which the user can move the slider. If true the marks will be spaced according the value of the step prop. If an array, it should contain objects with value and an optional label keys.

• Do we need a callback function that is fired when the mouseup is triggered?

PROPOSAL: onChanged , onChangeComitted (other names: onMouseUp, onChangeSubmitted)

• label prop vs Form.Field?

What should be the preferred way to label a slider? e.g.:

• media prop needed or should we use Flex + Icon or other components?

• valueFormat prop in v1?

Optional function to format the slider value.

• showValue prop in v1?

Whether to show the value on the right of the Slider.

Inspired from:

• Material UI
• Fabric
• MDN docs for <input type="range">
• ARIA practices

[jurokapsiar]

When can value, step, max and min be string? I'm not sure if we would be able to translate that into aria props.
When can value be string[]?

The second screenshot might not be a slider, but a read only meter/gauge. Can you please clarify with consumers?

Given that it is an <input>, I think the preferred way of providing label is the same as we have in the <Input /> component.