Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

slider

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
STATUS
Passing
DOWNLOADS
796
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
7 months 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.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
slider ()

Demos:

API:

Properties
NameTypeDescription
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