input range orient vertical

by eapo

HTML

Inkább igen <input type="range" if="voteRange" min="0" max="100" step="1" oninput="console.log(this.value)" onchange="console.log(this.value)" class="mobile" /> Inkább nem

CSS

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 1em;
    height: 12em;
    padding: 0 1em;
    display: block;
    clear: both;
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1em;
  cursor: pointer;
  animate: 0.2s;
    background: #ccc;
  border-radius: 0.2em;
  border: 1px inset #fff;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #aaa, 0px 0px 1px #aaa;
  border: 1px inset #000000;
  height: 2em;
  width: 2em;
  border-radius: 0.2em;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1em;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #aaa;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1em;
  cursor: pointer;
  animate: 0.2s;
  background: #ccc;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #aaa, 0px 0px 1px #aaa;
  border: 1px inset #000000;
  height: 2em;
  width: 1em;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1em;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color:...