I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position.
// Here is the code for my volume bar component:
import React from 'react';
class AudioVolume extends React.Component {
constructor(props) {
super(props);
this.state = {
volume: 1,
mute: false
};
[...]
}
componentDidMount() {
const { volume } = this.props;
[...]
}
[...]
// CSS styling for my volume bar:
.ap-volume-controls {
display: flex;
flex-direction: row;
justify-content: center;
width: 100px;
margin-top: 25px;
margin-left: 130px;
[...]
.ap-volume-icon {
margin-right: 10px;
[...]
}
#ap-volume-timeline {
margin-top: 5px;
width: 85px;
height: 4px;
border-radius: 15px;
background: $audio-slider-gray;
[...]
}
}
For better visualization, click https://i.stack.imgur.com/N8s4k.png to see the current positioning of the slider button relative to the progress bar.
How can I modify the code to ensure that the slider button appears on top of the progress bar rather than beside it?
Just to clarify, the gray bar represents the timeline, while the green bar signifies the handle:
View image https://i.stack.imgur.com/EcuEH.png