https://github.com/acehubert/material-ui-slider
Material-UI 1.0.0 Slider component
https://github.com/acehubert/material-ui-slider
material-ui react slider
Last synced: over 1 year ago
JSON representation
Material-UI 1.0.0 Slider component
- Host: GitHub
- URL: https://github.com/acehubert/material-ui-slider
- Owner: aceHubert
- License: mit
- Created: 2018-05-24T02:11:22.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:04:44.000Z (over 3 years ago)
- Last Synced: 2025-04-12T04:54:19.301Z (over 1 year ago)
- Topics: material-ui, react, slider
- Language: JavaScript
- Homepage: https://acehubert.github.io/material-ui-slider/
- Size: 13 MB
- Stars: 17
- Watchers: 1
- Forks: 4
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Slider for Material-UI 1.0.0
## Installation
``` bash
//with yarn
yarn add material-ui-slider
//with npm
npm install material-ui-slider --save
```
## Usage
Here's a quick example to get you started:
``` jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Slider } from 'material-ui-slider';
function App() {
return (
);
}
ReactDOM.render(, document.querySelector('#app'));
```
## Props
name | type | default | description
---- | ---- | ------- | -----------
min | number | 0 | min value in process bar.
max | number | 100 | max value in process bar.
defaultValue | number/array[number,number] | 0/[0,100] | default value, value must be between min and max.
value | number/array[number,number] | / | value in process bar.
decimals | number | 0 | number of decimal places for value.
range | bool | false | range choose, "defaultValue" must be an array
scaleLength | number | 0 | scale choose, value "0" means "no scale", "defaultValue" must be a multiple of "scaleLength".
direction | horizontal/vertical | horizontal |
color | string | | custom color for process bar, support HEX, RGB(RGBA), HSL
disabled | bool | false |
onChange | func | | Callback fired when the value is changed.
__Signature:__
function(value: number/array[number,number]) => void
onChangeComplete | func | | Callback fired when the value is changed completely.
__Signature:__
function(value: number/array[number,number]) => void
## LICENSE
[MIT](https://choosealicense.com/licenses/mit/)