0.0.9 • Published 2 years ago
react-two-input-ranger v0.0.9
A Simple Two Input Material UI Range Component
This package takes advantage of the React MaterialUI framework v5.2.8 for components.
Example Implementation
<Ranger
startInputProps={{error: false}}
endInputProps={{error: false}}
errorMessage="This is an error"
startPlaceholder="Start"
endPlaceholder="End"
separatorValueVariant="subtitle1"
separatorValue="-"
onStartChanged={(ev) => {
console.log('start changed'); console.log(ev)}
}
onEndChanged={(ev) => {
console.log('end changed'); console.log(ev)}
}
numbersOnly={true}
/>CSS Override classes
| Parent Classname | Child Classname | Description |
|---|---|---|
| main | ||
| main | container | The main container that holds all other elements |
| controlsContainer | The container that holds all of the inputs | |
| errorMessage | ||
| errorMessage | container | the container DIV that holds the error message component |
| errorMessage | text | the actual error message text displayed |
| start | container | the container that holds the Start input control |
| start | input | the actual Start input control |
| end | container | the container that holds the End input control |
| end | input | the actual End input control |
| separator | container | the container that holds the Separator component |
| separator | typography | the separator text that is displayed |
Default Styles
{
main: {
container: {
display: 'flex',
flexDirection: 'column'
}
},
controlsContainer: {
padding: 20,
flex: 1,
textAlign: 'center'
},
errorMessage:{
container:{
flex: 1,
textAlign: 'center'
},
text: {
color: 'red'
}
},
start: {
container: {
display: 'inline-block'
},
input: {}
},
separator: {
container: {
display: 'inline-block',
marginTop: 15,
paddingLeft: 10,
paddingRight: 10
},
typography: {
color: 'black'
}
},
end: {
container: {
display: 'inline-block'
},
input: {
}
}
}