slider

v4.9.10

v4.5.2

STATUS

Passing

DOWNLOADS

99,303

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

30 KB

Demos: - [Slider](https://material-ui.com/components/slider/) API: - [Slider API](https://material-ui.com/api/slider/)

1 contributor

Install slider as a package?

Copied

npm i @bit/mui-org.material-ui.slider

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

slider ()

Demos:

Slider

API:

Slider API

Properties

Name	Type	Description
aria-label	`custom`	The label of the slider.
aria-labelledby	`string`	The id of the element containing a label for the slider.
aria-valuetext	`custom`	A string value that provides a user-friendly name for the current value of the slider.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
color	`'primary' \| 'secondary'`	The color of the component. It supports those theme colors that make sense for this component.
component	`elementType`	The component used for the root node. Either a string to use a DOM element or a component.
defaultValue	`number \| number[]`	The default element value. Use when the component is not controlled.
disabled	`bool`	If `true`, the slider will be disabled.
getAriaLabel	`function`	The thumb label’s index to format.
getAriaValueText	`function`	The thumb label’s value to format.
marks	`bool \| array`	Marks indicate 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.
max	`number`	The maximum allowed value of the slider. Should not be equal to min.
min	`number`	The minimum allowed value of the slider. Should not be equal to max.
name	`string`	Name attribute of the hidden `input` element.
onChange	`function`	The event source of the callback.
onChangeCommitted	`function`	The event source of the callback.
onMouseDown	`function`
orientation	`'horizontal' \| 'vertical'`	The slider orientation.
scale	`function`	A transformation function, to change the scale of the slider.
step	`number`	The granularity with which the slider can step through values. (A “discrete” slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step. When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
ThumbComponent	`elementType`	The component used to display the value label.
track	`'normal' \| false \| 'inverted'`	The track presentation: `normal` the track will render a bar representing the slider value. `inverted` the track will render a bar representing the remaining slider value. `false` the track will render without a bar.
value	`number \| number[]`	The value of the slider. For ranged sliders, provide an array with two values.
ValueLabelComponent	`elementType`	The value label component.
valueLabelDisplay	`'on' \| 'auto' \| 'off'`	Controls when the value label is displayed: `auto` the value label will display when the thumb is hovered or focused. `on` will display persistently. `off` will never display.
valueLabelFormat	`string \| function`	The format function the value label’s value. When a function is provided, it should have the following signature: {number} value The value label’s value to format {number} index The value label’s index to format