Как сделать мобильный адаптивный слайдер с вертикальным диапазоном - PullRequest
Новая
       10

Как сделать мобильный адаптивный слайдер с вертикальным диапазоном

1 голос
/ 25 сентября 2019

Я установил ползунок диапазона в вертикальное положение.но это не отзывчиво.Я проверил в мобильных устройствах Chrome по умолчанию.при настройке ползунка диапазона он будет прокручивать страницу

Я добавил свой код здесь. 

.slido{   
 -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  -webkit-transform: rotate(90deg);
}

.slido::-webkit-slider-thumb {
   -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Использование только transform для элемента вообще не влияет на размер или положение его родителя или любых других элементов.Нет абсолютно никакого способа изменить этот факт того, как работает преобразование.поэтому добавление div на родительском уровне (который может справиться с переполнением вращения) является одним из решений. 

.slido {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  transform: rotate(90deg);
}

.slido::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.rotation-wrapper-outer {
  display: table;
}

.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}

.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
         transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains
         text and you want a single long vertical line of text and the pre-rotation
         width of your element is small enough that the text wraps: */
  white-space: nowrap;
}
<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <input type="range" class="slido" min="1" max="100" step="1">
    </div>
  </div>
</div>
0 голосов
/ 25 сентября 2019

Вы перевели горизонтальный ползунок в вертикальный, который не работает, поэтому вы можете использовать только вертикальный ползунок, проверяя фрагмент. 

let app = (() => {

  function updateSlider(element) {
    if (element) {
      let parent = element.parentElement,
        lastValue = parent.getAttribute('data-slider-value');

      if (lastValue === element.value) {
        return; // No value change, no need to update then
      }

      parent.setAttribute('data-slider-value', element.value);
      let $thumb = parent.querySelector('.range-slider__thumb'),
        $bar = parent.querySelector('.range-slider__bar'),
        pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);

      $thumb.style.bottom = `${pct}%`;
      $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
      $thumb.textContent = `${element.value}%`;
    }
  }
  return {
    updateSlider: updateSlider
  };

})();

(function initAndSetupTheSliders() {
  const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
  inputs.forEach(input => input.setAttribute('value', '50'));
  inputs.forEach(input => app.updateSlider(input));
  // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
  inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
  inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #3D3D4A;
  color: white;
  font-family: sans-serif;
}

.info {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  opacity: 0.5;
}

.container {
  position: relative;
  display: inline-block;
  padding-top: 40px;
}

.range-slider {
  display: inline-block;
  width: 40px;
  position: relative;
  text-align: center;
  max-height: 100%;
}

.range-slider:before {
  position: absolute;
  top: -2em;
  left: 0.5em;
  content: attr(data-slider-value) '%';
  color: white;
  font-size: 90%;
}

.range-slider__thumb {
  position: absolute;
  left: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: white;
  color: #777;
  font-size: 50%;
  box-shadow: 0 0 0 4px #3D3D4A;
  border-radius: 50%;
  pointer-events: none;
}

.range-slider__bar {
  left: 16px;
  bottom: 0;
  position: absolute;
  background: linear-gradient(dodgerblue, blue);
  pointer-events: none;
  width: 8px;
  border-radius: 10px;
}

.range-slider input[type=range][orient=vertical] {
  position: relative;
  margin: 0;
  height: calc(100vh - 50px);
  width: 100%;
  display: inline-block;
  position: relative;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}

.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  border: none;
  background: #343440;
  width: 8px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
}

.range-slider input[type=range][orient=vertical]::-moz-range-track {
  border: none;
  background: #343440;
  width: 8px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
}

.range-slider input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: #343440;
  width: 8px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
  color: transparent;
  height: 100%;
}

.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
  display: none;
}

.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}

.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}

.range-slider input[type=range][orient=vertical]::-ms-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="range-slider">
    <input type="range" orient="vertical" min="0" max="100" />
    <div class="range-slider__bar"></div>
    <div class="range-slider__thumb"></div>
  </div>

</div>
...