CODEWITHSUNDEEP
htmlcss
Jenssen
Jenssen

Reputation: 1871

Css input slider has weird positioning

I'm trying to get a input slider within another parent div. The desired result looks like this:

enter image description here

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/

Upvotes: 1

Views: 73

Answers (1)

Professor Abronsius
Professor Abronsius

Reputation: 33813

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">&nbsp;</div>
  </div>
</div>

Upvotes: 1

Related Questions