0
452
ViewsCan't figure out how to style rc-slider (React Component Slider) via inline styling
I've read the docs many times over and still don't fully understand how to style the React slider via inline CSS (https://github.com/react-component/slider).
I see that you need to pass a handle props to the slider with the css and some kind of component with offset and value props. When I try to do this, my CSS comes back horrible with the knobs not moving and the slider being all over the place. Regular styling doesn't work on the slider.
This is how my component that I pass on to the slider component looks like:
import React from "react";
export default class SliderStyle extends React.Component {
render(){
let style = {
position: "absolute",
left: "0",
height: "15px",
borderRadius: "8px",
backgroundColor: "#000"
};
let tracker = {
position: "absolute",
marginLeft: "-7px",
marginTop: "-5px",
width: "14px",
height: "14px",
cursor: "pointer",
borderRadius: "50%",
border: "solid 2px #000",
backgroundColor: "#fff"
}
return(
<div style={style}><div style={tracker}></div></div>
)
}
}
Then in the main component:
<Slider range allowCross={false} handle={<SliderStyle/>} value={this.state.range} onChange={this.onSliderChange.bind(this)}/>
I'm assuming the div I return from the component that I pass into the Slider component is the actual slider, and the div inside the first one is what will be the knob. The colors change, but the slider knob doesn't move when values change.
Is there something I'm not getting here?
1 answers
Answer question0
Looking at the example given by slider about creating a custom handle - http://react-component.github.io/slider/?path=/story/rc-slider--slider - first I'd like to explain the handle object. This will only be replacing the handle in your slider.. what I think you refer to as the "knob". This does not change the styling of the entire slider (you should use Slider's className prop to change the non-handle slider styles).
Also, you need to learn about the offset and value props passed to your handle component. The offset prop is needed to determine the percent left your handle needs to be. Without using this, your handle will not move, which seems to be what you are currently experiencing. The value prop should be displayed to show users what value the slider is currently at (i.e. 3 out of 10). For example:
const handle = {
position: "absolute",
transform: 'translate(-50%, -50%)',
width: "14px",
height: "14px",
cursor: "pointer",
borderRadius: "50%",
border: "solid 2px #000",
backgroundColor: "#fff"
};
const valueBubble = {
position: "absolute",
top: "-10px",
fontSize: "14px"
};
export default class Handle extends React.Component {
render(){
const handleStyle = Object.assign({ left: `${this.props.offset}%` }, handle);
return(
<div style={handleStyle}>
<div style={valueBubble}>{this.props.value}</div>
</div>
)
}
}I have not run this code, but this should produce something like a circular handle with a bubble above it holder the slider's current value.