如何在范围滑块上偏移矩形拇指

Question

问题：

---

我有一个在Vue.js中制作的自定义范围滑块，它有一个矩形的拇指，但是我有一个问题，拇指在轨道的边缘上延伸。

代码：

---

<template>
  <div class="slidecontainer">
    <input
      v-model="updateSlider"
      type="range"
      min="2.5"
      max="100"
      step="0.5"
      class="slider"
      id="slider"
      @change="slider(updateSlider)"
    />
    <div :style="{ left: updateSlider + '%' }" id="selector">
      <div class="selector-thumb">
        <p style="width: 100%; text-align: center; font-size: 1.45rem">
          &#60; R{{
            ((updateSlider / 0.5) * 1000)
              .toString()
              .replace(/\B(?=(\d{3})+(?!\d))/g, " ")
          }}
          &#62;
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  computed: {
    updateSlider: {
      get() {
        return this.$store.getters.slider;
      },
      set(value) {
        this.$store.dispatch("slider", value);
      },
    },
  },
  methods: {
    ...mapActions(["slider"]),
  },
};
</script>

<style scoped>
div > p {
  margin-bottom: 0px;
  color: #6dbfe6;
}
.slidecontainer {
  width: 100%;
  position: relative;
  display: flex;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 90%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 50px;
  margin: auto;
}

.slider {
  opacity: 1;
}
#slider {
  -webkit-appearance: none;
}
#slider::-webkit-slider-runnable-track {
  position: relative;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 250px;
  height: 250px;
  cursor: pointer;
  z-index: 999;
  position: relative;
  opacity: 0;
  /* background: orange; */
}
#selector {
  height: 95px;
  width: 100px;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.selector-thumb {
  height: 40px;
  width: 100px;
  background: black;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
#slider::before {
  bottom: -1rem;
  content: "R89";
  height: 5rem;
  width: 5rem;
  background: #827ab7;
  position: absolute;
  border-radius: 50px;
  z-index: 2;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 5rem;
  font-size: 1.45rem;
  left: 0px;
}
#slider::after {
  bottom: -1rem;
  content: "R195";
  height: 5rem;
  width: 5rem;
  background: #827ab7;
  position: absolute;
  border-radius: 50px;
  z-index: 2;
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 5rem;
  font-size: 1.45rem;
  right: 0;
}
.selector-thumb > p {
  color: white;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  #slider::-webkit-slider-thumb {
    width: 150px;
    height: 100px;
  }
}
</style>

可能的解决方案

---

通过计算拇指在页面X轴上的位置，找到一种偏移拇指的方法。 或根据位置动态翻译X。

还有其他解决方案吗？

JsFiddle

Answer 1

解决方案

---

比我想象的要简单，您必须使父容器的宽度更小，然后通过使轨道绝对值来增加轨道的像素宽度，以使其延伸到父容器之外。

通过这种方式，拇指停留在父容器slidecontainer的宽度之间

但是范围滑块的轨迹仍然延伸到边界之外。

.slidecontainer {
  width: 66%;
  position: relative;
  display: flex;
  justify-content: center;
  height:4rem;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 145%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 50px;
  margin: auto;
  position: absolute;
}