How to get value text to follow slider input? - css

Question

I've created a Slider in react.
It looks like this:
import styles from '../Slider.scss';
type Props = {|
maxValue: Number,
minValue: Number,
onChange: Function,
step?: Number,
value: Number
|};
const SliderInput = (props: Props) => {
const ratio = (props.value - props.minValue) / (props.maxValue - props.minValue);
return (
<div className={styles[`slider-container`]}>
<div className={styles.labels}>
<span>${props.minValue}</span>
<span>${props.maxValue}</span>
</div>
<div>
<input
className={styles.slider}
max={props.maxValue}
min={props.minValue}
onChange={props.onChange}
step={props.step}
type="range"
value={props.value}
/>
<div className={styles[`slider-value`]}>
<span>${props.value}</span>
</div>
</div>
</div>
);
};
The styles look like this:
.slider-container {
width: 100%;
}
.slider {
-webkit-appearance: none;
background: transparent;
width: 100%;
height: 25px;
background-image: linear-gradient(to right, #F5F5F5, #A5D8F5);
outline: none;
}
.slider-value {
/* Not sure what goes here yet */
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
background: black;
cursor: pointer;
}
.labels {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
What I'm trying to accomplish:
I want the value of the slider to show up right above or below the current position of the slider input. I'm thinking I'll have to give the slider-value a position: absolute, but I'm not sure what to do beyond that.

Answer 1

First we add position relative to .slider-value and we need to match the width of the input[type=range] because we gonna move the span along it using the left property.
.slider-value {
position: relative;
/* it's for because left moves the element relative to it's left not the middle */
width:calc(100% - 30px);
}
.slider-value>span {
position: absolute;
text-align: center;
/* must match the thumb width */
width: 30px;
}
im not going to go over how you update the value, im just going to tell you how to use it,
so we gonna assign the value of the slider to the left property of the span,
should be getting updated and passed as props to the slider something like:
<span style={{left:this.props.value+"%"}} >{this.props.value}</span>
this would work fine the minValue equals 0 and the maxValue equals 100, however this won't be the only case, so we map the value.
The map function should look like this, i just copied from the p5.js lib
map(n, start1, stop1, start2, stop2) {
return ((n-start1)/(stop1-start1))*(stop2-start2)+start2;
}
The span then should look like this
<span style={{this.map(this.props.value,this.props.minValue,this.props.maxValue,0,100)+"%"}} >{this.props.value}</span>
And if you have any question, please don't hesitate, i know i'm good at explaining. :)
EDIT
Live Demo
Code