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

Question

Problem:

---

I have a custom range slider that I made in Vue.js and it has a rectangular thumb, however I have this issue where the thumb extends over the edges of the track.

Code:

---

 <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>

Possible Solution

---

Finding a way to offset the thumb by calculating its position on the X axis of the page. or dynamically translateX depending on positon.

any other solutions?

JsFiddle

Answer 1

Solution

---

Is simpler than what I thought it to be, you have to make the parent container's width smaller and then increase the pixel width of the track to extend outside the parent container by making the track absolute.

this way the thumb stays inbetween the width of the parent container slidecontainer

yet the track of the range slider still extends outside the bounds.

 .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; }