Как обернуть элемент ввода в div

Question

Я создаю веб-сайт, который позволяет пользователю менять темпуру.

Чтобы изменить значение температуры, я хочу использовать ползунок диапазона, но проблема в том, что ползунок не помещается внутри оберточного div.

Это мой HTML:

<div class="col" id="controls">
     <div class="sectionTitle">    
          <span>Controls</span>
      </div>
      <div class="control">
           <div class="controlTitle">
                 place holder
           </div>
            <div>
                <input class="slider" type="range" min="0" max="100" /> 
            </div>      
       </div>
</div>

css:

.slider {
    width: 130px;
    height: 3px;
    border-radius: 1px;  
    background: rgb(87, 101, 226);
    opacity: 0.7;
    transition: opacity .2s;
    transform: rotate(90deg);
  }

  .slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgb(87, 101, 226);
    cursor: pointer;
  }

  .control{
       display: flex;
       flex-direction: row;
   }

Теперь я получаю, что ползунок выходит из потока файлов, и в результате этого: https://drive.google.com/open?id=19bsV2Bmd_xuJDwO0Z7eUhmtYEE3xdrTN

Answer 1

Похоже, что вы вращаете ползунок, чтобы сделать его вертикальным, это то, что вы ищете? если нет, не могли бы вы удалить этот бит кода?

.slider {
    width: 130px;
    height: 3px;
    border-radius: 1px;  
    background: rgb(87, 101, 226);
    opacity: 0.7;
    transition: opacity .2s;
    transform: rotate(90deg); //remove this line
  }