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/WGvxmNhttps://jsfiddle.net/rwaldron/XukVc/

Answer 1

[hacky有点，但是它看起来更像所需的布局，但是稍微靠近了-尚未经过测试以查看其在页面上的不同位置或在不同的尺寸下的效果。更改布局的关键之一是设置transform-origin并使用translate3d调整位置

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

  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:18.5rem;

  transform-origin:5% 50%;
  transform:rotate(-90deg) translate3d( -8rem, 0, 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">&nbsp;</div>
  </div>

  <div class="wrapper-end">
  <div class="wrapper-end-left"><input type="range" /></div>
  <div class="wrapper-end-right">&nbsp;</div>
  </div>
</div>