Css input slider has weird positioning - html

Question

I'm trying to get a input slider within another parent div. The
desired result looks like this:
The problem is when I try this the input slider gets a huge width, and
the height is messed up aswel.
I made Fiddle:
.wrapper {
display: inline-block;
width: 100%;
max-width: 100px;
background: #353434;
color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
font-family: 'Raleway', 'Helvetica Neue', 'Helvetica', 'Arial'
}
.wrapper-header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
padding: .5rem;
}
.wrapper-middle {
display: flex;
justify-content: center;
align-items: center;
}
.wrapper-end {
display: flex;
flex-flow: row nowrap;
justify-content: center;
height: 340px;
padding-top: 1rem;
padding-bottom: 1rem;
}
.slider-value {
min-width: 24px;
padding: .25rem;
border-radius: 2px;
color: #1fcc1f;
background: #333;
box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.5);
font-family: 'VT323', monospace;
text-align: center;
}
.button {
padding: .55rem;
border-radius: 2px;
background: linear-gradient(to bottom, #4f4f4f 0%, #0e0e0e 100%);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.wrapper-end-left {
height: 100%;
background: red;
}
.wrapper-end-right {
height: 100%;
background: blue;
}
[type='range'] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
margin: 0;
padding: 0;
width: 30rem;
height: 1.5em;
transform: rotate(-90deg);
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
box-sizing: border-box;
border: none;
width: 1.5em; height: 1.5em;
border-radius: 50%;
background: #f90;
}
input[type=range]::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
margin: 0;
padding: 0;
width: 100%; height: 100%;
background: #ccc;
}
<div class="wrapper">
<div class="wrapper-header">
<div class="button">
x
</div>
<div class="button">
x
</div>
</div>
<div class="wrapper-middle">
<div class="slider-value">
1
</div>
</div>
<div class="wrapper-end">
<div class="wrapper-end-left">
<input type="range">
</div>
<div class="wrapper-end-right">
two
</div>
</div>
</div>
Does someone know why this is happening?
Already read a lot here about input sliders but can't fix it.
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
https://codepen.io/freoted/pen/WGvxmN
https://jsfiddle.net/rwaldron/XukVc/

Answer 1

It is a little hacky but it resembles the desired layout now slightly closer - not tested to see how this would fare at different locations on the page or at different sizes. one of the key things that changed the layout was setting the transform-origin and tweaking the location with translate3d
document.addEventListener('DOMContentLoaded',(e)=>{
document.querySelector('[type="range"]').addEventListener('change',(e)=>{
document.querySelector('div.slider-value').textContent=e.target.value > 0 ? e.target.value : e.target.value * -1;
});
});
.wrapper {
display: inline-block;
width: 100%;
max-width: 100px;
background: #353434;
color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
font-family: 'Raleway', 'Helvetica Neue', 'Helvetica', 'Arial'
}
.wrapper,.wrapper *{
box-sizing: border-box;
}
.wrapper-header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
padding: .5rem;
}
.wrapper-middle {
display: flex;
justify-content: center;
align-items: center;
}
.wrapper-end {
display: flex;
flex-flow: row nowrap;
justify-content: center;
height: 340px;
padding-top: 1rem;
padding-bottom: 1rem;
}
.slider-value {
min-width: 24px;
padding: .25rem;
border-radius: 2px;
color: #1fcc1f;
background: #333;
box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.5);
font-family: 'VT323', monospace;
text-align: center;
}
.button {
padding:0.55rem;
border-radius:2px;
background: linear-gradient(to bottom, #4f4f4f 0%, #0e0e0e 100%);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.wrapper-end-left {
height: 100%;
padding:0;
margin:0 1.25rem 0 0;
display:flex;
flex-direction:column;
flex-wrap:no-wrap;
align-content:center;
justify-content:stretch;
}
.wrapper-end-right {
height:100%;
width:0.75rem!important;
background:linear-gradient(0deg, rgba(13,60,2,1) 0%, rgba(57,241,17,1) 79%, rgba(245,157,63,1) 92%, rgba(255,0,0,1) 100%);
}
.wrapper-end-left,
.wrapper-end-right{
width:2rem;
}
[type='range'] {
-webkit-appearance:none;
margin:0;
padding:0;
flex:1;
height:1.5rem;
width:19.2rem;
transform-origin:5% 50%;
transform:rotate(-90deg) translate3d( -8.6rem, -0.25rem, 0 );
background:transparent;
outline:0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
border:none;
width:1.5em;
height:1.5em;
border-radius:50%;
background:black;
border:2px solid silver;
margin:-0.35rem 0 0 0;
}
input[type=range]::-webkit-slider-runnable-track {
box-sizing:border-box;
border:none;
margin:0;
padding:0;
height:0.5rem;
flex:1;
background:#ccc;
}
<div class="wrapper">
<div class="wrapper-header">
<div class="button">x</div>
<div class="button">x</div>
</div>
<div class="wrapper-middle">
<div class="slider-value">0</div>
</div>
<div class="wrapper-end">
<div class="wrapper-end-left"><input type="range" step=3 min=-60 max=12 value=0 /></div>
<div class="wrapper-end-right"> </div>
</div>
</div>