如何偏移范围滑块上的矩形拇指 [英] How to offset a rectangular thumb on a Range Slider
问题描述
问题:
我有一个在 Vue.js 中制作的自定义范围滑块，它有一个矩形拇指，但是我遇到了拇指延伸超过轨道边缘的问题.
代码:
<div class="slidecontainer"><输入v-model=updateSlider"类型=范围"min=2.5"最大值=100"步长=0.5"类=滑块"id=滑块"@change="slider(updateSlider)";/><div :style="{ left: updateSlider + '%' }";id=选择器"><div class="selector-thumb"><p style="宽度:100%;文本对齐:居中；字体大小:1.45rem"><R{{((更新滑块/0.5) * 1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "")}}></p></模板><脚本>从vuex"导入 { mapActions };导出默认{计算:{更新滑块:{得到() {返回 this.$store.getters.slider;},设定值) {this.$store.dispatch(slider", value);},},},方法: {...mapActions([滑块"]),},};<样式范围>div >p{底边距:0px；颜色:#6dbfe6；}.slidecontainer {宽度:100%；位置:相对；显示:弹性；}.slider {-webkit 外观:无；外观:无；宽度:90%；高度:25px；背景:#d3d3d3；大纲:无；不透明度:0.7；-webkit-transition: 0.2s;过渡:不透明度0.2s；边框半径:50px；保证金:自动；}.slider {不透明度:1；}#滑块{-webkit 外观:无；}#slider::-webkit-slider-runnable-track {位置:相对；}#slider::-webkit-slider-thumb {-webkit 外观:无；外观:无；宽度:250px；高度:250px；光标:指针；z-索引:999；位置:相对；不透明度:0；/* 背景:橙色；*/}#选择器{高度:95px；宽度:100px；位置:绝对；顶部:-50%；左:50%；变换:翻译(-50%，-50%)；z-索引:2；}.selector-thumb {高度:40px；宽度:100px；背景:黑色；背景尺寸:封面；背景位置:中心；位置:绝对；底部:0；z-索引:1；}#slider::before {底部:-1rem；内容:R89"；高度:5rem；宽度:5rem；背景:#827ab7；位置:绝对；边框半径:50px；z-索引:2；白颜色;文本对齐:居中；垂直对齐:中间；行高:5rem；字体大小:1.45rem；左:0px；}#slider::after {底部:-1rem；内容:R195"；高度:5rem；宽度:5rem；背景:#827ab7；位置:绝对；边框半径:50px；z-索引:2；白颜色;文本对齐:居中；垂直对齐:中间；行高:5rem；字体大小:1.45rem；右:0；}.selector-thumb >p{白颜色;文本对齐:居中；顶部:50%；左:50%；位置:绝对；变换:翻译(-50%，-50%)；}@media 屏幕和(最大宽度:767px){#slider::-webkit-slider-thumb {宽度:150px；高度:100px；}}</风格>
可能的解决方案
通过计算其在页面 X 轴上的位置，找到一种偏移拇指的方法.或根据位置动态 translateX.
还有其他解决方案吗?
解决方案
<小时>比我想象的要简单，您必须使父容器的宽度更小，然后通过使轨道绝对化来增加轨道的像素宽度以扩展到父容器之外.这样拇指就停留在父容器的宽度之间slidecontainer
然而范围滑块的轨迹仍然延伸到边界之外.
.slidecontainer {宽度:66%；位置:相对；显示:弹性；对齐内容:居中；高度:4rem；}.slider {-webkit 外观:无；外观:无；宽度:145%；高度:25px；背景:#d3d3d3；大纲:无；不透明度:0.7；-webkit-transition: 0.2s;过渡:不透明度0.2s；边框半径:50px；保证金:自动；位置:绝对；}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">
< R{{
((updateSlider / 0.5) * 1000)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, " ")
}}
>
</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?
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;
}
这篇关于如何偏移范围滑块上的矩形拇指的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
