Placing text inside range slider - html

Question

I am new to CSS and have a question that is probably simple to answer, though I am not sure which class to start with.
My objective is to put text that fit neatly inside of range slider
I am using public range slider example:
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider };
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
.range-slider {
position: relative;
text-align: center;
height: 300px;
max-height: 100%;
margin-top: 15%;
/*margin-bottom: 5vh;*/
}
/*.range-slider:before {
position: absolute;
top: -2em;
//left: .5em;
content: attr(data-slider-value) "%";
color: red;
font-size: 25px;
}*/
.range-slider__thumb {
position: absolute;
left: 32%;
width: 45px;
height: 45px;
line-height: 45px;
font-weight: bold;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 80%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:999;
// position: absolute;
// left: 42%;
// width: 30px;
// height: 30px;
// line-height: 30px;
// background: white;
// color: black;
// font-size: 50%;
// font-size: 80%;
// box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
// border-radius: 50%;
// pointer-events: none;
// z-index:999;
}
.range-slider__thumb_start{
position: absolute;
left: 33%;
width: 45px;
height: 45px;
line-height: 30px;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 60%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:99;
bottom: 0px;
}
.range-slider__bar {
left: 42%;
bottom: 0;
position: absolute;
background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
pointer-events: none;
width: 20px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: 100%;
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: orangered;
width: 18px;
border-color: #B94F1B;
border-radius: 10px;
//box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
//-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
//-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
//box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider-text{
font-size: 1rem;
color: red;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
<div class="range-slider" id="range_slider">
<input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" />
<div class="range-slider__bar"></div>
<div class="range-slider-text">Header Two</div>
<div class="range-slider__thumb"></div>
<div class="bubble" id="me" style="display: none">slide to provide your feedback</div>
<!-- <div class="range-slider__thumb_start"></div> -->
<div class="range-slider__line"></div>
</div>
I am new to CSS and have a question that is probably simple to answer, though I am not sure which class to start with.
My objective is to put text that fit neatly inside of range slider
I am using public range slider example:
Like

Answer 1

I just update your code with few CSS and HTML changes, I hope it'll help you out. Thanks
Add display: flex;, justify-content: center; and align-items: center CSS in .range-slider__bar.
.range-slider__bar {
left: 42%;
bottom: 0;
position: absolute;
background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
pointer-events: none;
width: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
Also, add slider-text css.
.slider-text {
transform: rotate(-90deg);
white-space: nowrap;
}
In HTML i just add <div class="slider-text">My Desire</div> inside of your <div class="range-slider__bar">.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider };
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
.range-slider {
position: relative;
text-align: center;
height: 300px;
max-height: 100%;
margin-top: 15%;
/*margin-bottom: 5vh;*/
}
/*.range-slider:before {
position: absolute;
top: -2em;
//left: .5em;
content: attr(data-slider-value) "%";
color: red;
font-size: 25px;
}*/
.range-slider__thumb {
position: absolute;
left: 32%;
width: 45px;
height: 45px;
line-height: 45px;
font-weight: bold;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 80%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:999;
// position: absolute;
// left: 42%;
// width: 30px;
// height: 30px;
// line-height: 30px;
// background: white;
// color: black;
// font-size: 50%;
// font-size: 80%;
// box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
// border-radius: 50%;
// pointer-events: none;
// z-index:999;
}
.range-slider__thumb_start{
position: absolute;
left: 33%;
width: 45px;
height: 45px;
line-height: 30px;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 60%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:99;
bottom: 0px;
}
.range-slider__bar {
left: 42%;
bottom: 0;
position: absolute;
background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
pointer-events: none;
width: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.slider-text {
transform: rotate(-90deg);
white-space: nowrap;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: 100%;
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: orangered;
width: 18px;
border-color: #B94F1B;
border-radius: 10px;
//box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
//-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
//-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
//box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider-text{
font-size: 1rem;
color: red;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
<div class="range-slider" id="range_slider">
<input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" />
<div class="range-slider__bar">
<div class="slider-text">My Desire</div>
</div>
<div class="range-slider-text">Header Two</div>
<div class="range-slider__thumb"></div>
<div class="bubble" id="me" style="display: none">slide to provide your feedback</div>
<!-- <div class="range-slider__thumb_start"></div> -->
<div class="range-slider__line"></div>
</div>