Css 输入滑块的位置很奇怪

Question

我正在尝试在另一个父 div 中获取输入滑块。这 期望的结果如下所示：

问题是当我尝试这个时，输入滑块的宽度很大，并且 高度搞砸了。

我做了小提琴：

.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>

有人知道为什么会这样吗？

已经在这里阅读了很多关于输入滑块的信息，但无法修复它。

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ https://codepen.io/freoted/pen/WGvxmN https://jsfiddle.net/rwaldron/XukVc/

Answer 1

它有点hacky，但它现在更接近于所需的布局 - 没有测试过它在页面上的不同位置或不同尺寸下的表现如何。改变布局的关键之一是设置transform-origin 并使用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>