I am looking to achieve this particular layout design. https://i.stack.imgur.com/p9UTH.jpg I am unsure about how to display the input value in the bubble within this layout.
The visibility of the bubble should only be triggered on hover.
Below is the code snippet:
<div class="control__wrapper">
<input type="range" min="1" max="4" steps="1" value="4" class="range">
//<span class="thum"></span>
</div>
.control__wrapper{
width:100px;
position:relative;
}
.range{
width:100px;
-webkit-appearance: none;
-ms-vertical-align:-10px;
}
.range:focus{
outline:none;
}
.range::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
background: #ddd;
}
.range::-webkit-slider-thumb {
border: 1px solid black;
height: 15px;
width: 10px;
background: #eee;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
}
.range:focus::-webkit-slider-runnable-track {
background: #ddd;
}