This is not an issue with the package per se, but I need to use the range slider and have some labels underneath it, the problem being I can't make the labels centre align with the handles. See example:
https://codesandbox.io/s/0312l75vpw
The problem is my text offset is obviously different to handle offset.
I was looking for suggestions :) What do people think?
1) Render the offset of labels according to offset of handles.
I looked at the code out how the offset is calculated
_calcOffset: function (value) { var range = this.props.max - this.props.min; if (range === 0) { return 0; } var ratio = (value - this.props.min) / range; return ratio * this.state.upperBound; } ,
I could use this logic to calculate the offset of each label (and use position: absolute for labels too) but the problem IS:
How do I make sure Labels only get rendered after react-slider, as I will need to know its width beforehand etc?
jenniredfield
commented
5 years ago
Hi guys,
This is not an issue with the package per se, but I need to use the range slider and have some labels underneath it, the problem being I can't make the labels centre align with the handles. See example: https://codesandbox.io/s/0312l75vpw
The problem is my text offset is obviously different to handle offset.
I was looking for suggestions :) What do people think?
1) Render the offset of labels according to offset of handles.
I looked at the code out how the offset is calculated
_calcOffset: function (value) { var range = this.props.max - this.props.min; if (range === 0) { return 0; } var ratio = (value - this.props.min) / range; return ratio * this.state.upperBound; } ,I could use this logic to calculate the offset of each label (and use position: absolute for labels too) but the problem IS: How do I make sure Labels only get rendered after react-slider, as I will need to know its width beforehand etc?
2) Or does anyone have any other suggestions?