范围输入拇指不与轴刻度对齐

时间：2016-11-03 01:01:35

标签： html css input sass input-type-range

此input[type=range] codepen中的拇指a.k.a.旋钮与刻度线无法正确对齐。根据值的不同，似乎有不同的数量（左或右）。尝试移动拇指看。我可以使用什么CSS使拇指与当前刻度线对齐，使其适用于轴上的所有刻度？

input.range {
  -webkit-appearance: none;
  bottom: -10px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
input.range:focus {
  outline: 0;
}
input.range::-moz-focus-outer {
  border: 0;
}
input.range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}
input.range::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}
input.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}
input.range::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}
input.range::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input.range::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  height: 5px;
}
input.range::-ms-fill-lower,
input.range::-ms-fill-upper {
  background: indigo;
  border: 0;
  border-radius: 40px;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
}
.range__tick {
  fill: silver;
}
.range__tick:first-child {
  -webkit-transform: translateX(2px);
  -moz-transform: translateX(2px);
  -ms-transform: translateX(2px);
  -o-transform: translateX(2px);
  transform: translateX(2px);
}
.range__tick:last-child {
  -webkit-transform: translateX(-3px);
  -moz-transform: translateX(-3px);
  -ms-transform: translateX(-3px);
  -o-transform: translateX(-3px);
  transform: translateX(-3px);
}
.range__field {
  border: 0;
}
<fieldset class="range__field">
  <input class="range" type="range" min="0" max="10">
  <svg role="presentation" width="100%" height="10" xmlns="http://www.w3.org/2000/svg">
    <rect class="range__tick" x="0%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="10%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="20%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="30%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="40%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="50%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="60%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="70%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="80%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="90%" y="3" width="1" height="10"></rect>
    <rect class="range__tick" x="100%" y="3" width="1" height="10"></rect>
  </svg>
  <svg role="presentation" width="100%" height="14" xmlns="http://www.w3.org/2000/svg">
    <text class="range__point" x="0%" y="14" text-anchor="start">0</text>
    <text class="range__point" x="10%" y="14" text-anchor="middle">1</text>
    <text class="range__point" x="20%" y="14" text-anchor="middle">2</text>
    <text class="range__point" x="30%" y="14" text-anchor="middle">3</text>
    <text class="range__point" x="40%" y="14" text-anchor="middle">4</text>
    <text class="range__point" x="50%" y="14" text-anchor="middle">5</text>
    <text class="range__point" x="60%" y="14" text-anchor="middle">6</text>
    <text class="range__point" x="70%" y="14" text-anchor="middle">7</text>
    <text class="range__point" x="80%" y="14" text-anchor="middle">8</text>
    <text class="range__point" x="90%" y="14" text-anchor="middle">9</text>
    <text class="range__point" x="100%" y="14" text-anchor="end">10</text>
  </svg>
</fieldset>

1 个答案:

答案 0 :(得分：2)

您没有考虑拇指相对于轨道边缘的宽度。

解决此问题的一种方法是将两个fopen()元素包裹在svg中，然后在两侧提供div等于拇指的一半 padding。

修改HTML：

width

附加到CSS：

<fieldset class="range__field">
    <input class="range" type="range" min="0" max="10" />
    <div class="timeline-wrapper">
        <!-- svgs go here -->
    </div>
</fieldset>


.timeline-wrapper {
    padding: 0 10px;
}

.timeline-wrapper {
  padding: 0 10px;
}
input.range {
  -webkit-appearance: none;
  bottom: -10px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
input.range:focus {
  outline: 0;
}
input.range::-moz-focus-outer {
  border: 0;
}
input.range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}
input.range::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}
input.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}
input.range::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}
input.range::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input.range::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  height: 5px;
}
input.range::-ms-fill-lower,
input.range::-ms-fill-upper {
  background: indigo;
  border: 0;
  border-radius: 40px;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
}
.range__tick {
  fill: silver;
}
.range__tick:first-child {
  -webkit-transform: translateX(2px);
  -moz-transform: translateX(2px);
  -ms-transform: translateX(2px);
  -o-transform: translateX(2px);
  transform: translateX(2px);
}
.range__tick:last-child {
  -webkit-transform: translateX(-3px);
  -moz-transform: translateX(-3px);
  -ms-transform: translateX(-3px);
  -o-transform: translateX(-3px);
  transform: translateX(-3px);
}
.range__field {
  border: 0;
}

相关问题
最新问题