React round slider component, using SVG and javascript
npm install react-round-slider> 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
``bash`
npm install -save react-round-slider
install yarn
`
yarn add react-round-slider
javascript
import React from 'react';
import ReactRoundSlider from 'ReactRoundSlider'; class SliderTest extends React.Component {
handleGetValue = value => {
console.log('VALUE', value);
};
render() {
return (
border={15}
subtitle={'Brightness'}
size={25}
value={0.1}
getValue={this.handleGetValue}/>
)
}
}
`API Options
javascript
propTypes = {
radius: PropTypes.number,
border: PropTypes.number,
subtitle: PropTypes.string,
size: PropTypes.number,
value: PropTypes.number,
getValue: PropTypes.func
};
`API Options explanation
radius
> Radius of the Slider, you can play with this radius and border to make to change the form. Default Value: 140border
> Changes the Width of the slider, higher values means wider slider, lower values means thinner slider. Default Value: 15subtitle
> String to show under the numbersize
> Actual size of the Slider, it uses em values. Default Value: 25value
> Initual value, it receives numbers greater than 0 and less than 1, example: 0.1, 0.2, 0.3, Default value 0.1getValue
> When React Round Slider detects a change, it returns the value.
Example:
javascript
handleValue = value => {
console.log(value);
} render() {
return (
)
}
``