This component is meant to be used on web, using React.
React Round Slider gives you round slider, which can be used for any of you slider needs, very easy to use and configurable, the API is very straight forward. No properties are required to render the componet.
install npm
npm install -save react-round-slider
install yarn
yarn add react-round-slider
import React from 'react';
import ReactRoundSlider from 'ReactRoundSlider';
class SliderTest extends React.Component {
handleGetValue = value => {
console.log('VALUE', value);
};
render() {
return (
<div>
<ReactRoundSlider
radius={140}
border={15}
subtitle={'Brightness'}
size={25}
value={0.1}
getValue={this.handleGetValue}/>
</div>
)
}
}
propTypes = {
radius: PropTypes.number,
border: PropTypes.number,
subtitle: PropTypes.string,
size: PropTypes.number,
value: PropTypes.number,
getValue: PropTypes.func
};
Radius of the Slider, you can play with this radius and border to make to change the form. Default Value: 140
Changes the Width of the slider, higher values means wider slider, lower values means thinner slider. Default Value: 15
String to show under the number
Actual size of the Slider, it uses em values. Default Value: 25
Initual value, it receives numbers greater than 0 and less than 1, example: 0.1, 0.2, 0.3, Default value 0.1
When React Round Slider detects a change, it returns the value. Example:
handleValue = value => {
console.log(value);
}
render() {
return (
<ReactRoundSlider getValue={this.handleValue}>
)
}