寻求专业知识：如何完美地对齐范围滑块的拇指和值显示？-解网

问：

我一直在做一个 Web 开发项目，遇到了一个特别具有挑战性的问题。我一直在尝试创建一个范围滑块，其中拇指和显示的值完全对齐。我希望该值始终高于拇指 0.5em，从而提供无缝的用户体验。然而，尽管我尝试了无数次，并尝试了 HTML、CSS 和 JavaScript，但如果没有复杂的计算，我还是无法实现这种效果。

我非常感谢有关如何有效完成这项工作的任何帮助或指导。如果您有创建范围滑块的经验，这些滑块无需进行复杂的计算即可直接显示拇指上方的值，或者您有解决此问题的替代方法或解决方案，那么您的见解将非常有价值。提前感谢您提供的任何帮助或建议。

该值将是实时数据。但首先，我想放一个静态值，看看下面的codepen。

所附图像参考了此代码。中间和居中偏心偏左偏心偏右偏心偏心偏右偏心偏心偏右偏心

* {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

html, body, form, form * {
    display: grid;
}

.js {
    --js: 1 ;
}

body, datalist {
    place-content: center;
}

body {
    font: 1em/1.25 ubuntu, sans-serif;
}

form, option {
    place-items: center;
}

form {
    --extra: 0;
    --large: 0;
    --not-large: calc(1 - var(--large));
    --small: 0;
    --not-small: calc(1 - var(--small));
    --track-w: min(25em, 100vw - 2*1.75em);
    overflow-x: hidden;
    padding: 0.875em;
    background: hsla(0, 0%, 91%, var(--hl));
    filter: grayScale(calc(1 - var(--hl, 0)));
    transition: 0.35s;
}
@media (min-width: 28.5em) {
    form {
        --extra: 1 ;
    }
}
@media (min-width: 320px) {
    form {
        --large: 1 ;
    }
}
@media (max-width: 220px) {
    form {
       --small: 1 ;
    }
}
form:focus-within, form:hover {
    --hl: 1 ;
}

label {
    font-size: 137.5%;
}

[for] {
    font-weight: 700;
}

input {
    width: calc(var(--track-w) + 1.75em);
    background: linear-gradient(90deg, #ff0000 0 20%, #F8C045  20% 40%, #51B052 40% 60%, #F8C045  60% 80%, #ff0000 0) 50%/var(--track-w) 0.375em no-repeat;
    cursor: pointer;
}
input::-webkit-slider-runnable-track, input::-webkit-slider-thumb, input {
    -webkit-appearance: none;
}
input::-webkit-slider-thumb {
    margin-top: -0.35em;
    border: none;
    width: 1.75em;
    height: 1.75em;
    background: currentcolor;
    --poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);
    -webkit-clip-path: var(--poly);
    clip-path: var(--poly);
    cursor: ew-resize;
}
input::-moz-range-thumb {
    margin-top: -0.35em;
    border: none;
    width: 1.75em;
    height: 1.75em;
    background: currentcolor;
    --poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);
    -webkit-clip-path: var(--poly);
    clip-path: var(--poly);
    cursor: ew-resize;
}
input:focus {
    outline: none;
}
input + output {
    --rng: calc(var(--max) - var(--min));
    --pos: calc((var(--val) - var(--min))/var(--rng)*var(--track-w));
    display: var(--js, none);
    grid-row: 2;
    justify-self: start;
    transform: translate(calc(.5*1.75em + var(--pos) - 50%));
    counter-reset: val var(--val);
}
input + output::after {
    content: counter(val);
}

datalist {
    --track-u: calc(var(--track-w)/var(--n));
    grid-auto-flow: column;
    width: calc(var(--track-w) + 1px);
    box-shadow: inset 0 1px currentcolor;
    background: linear-gradient(90deg, currentcolor 1px, transparent 0) repeat-x;
    background-size: calc(var(--track-u)/5) calc(var(--extra)*.5*0.875em);
}

option {
    --m: calc(var(--large));
    width: calc(var(--m)*var(--track-u));
    transform-origin: 50% 0;
    transform: scale(min(1, var(--m)));
    transition: transform 0.35s;
}
option:nth-child(odd) {
    --m: calc(var(--large) + 2*var(--not-large)*var(--not-small)) ;
}
option:first-child, option:last-child {
    --m: calc(var(--large) + var(--not-large)*(2*var(--not-small) + .5*var(--n)*var(--small))) ;
}
option.mid {
    --m: calc(var(--large) + var(--not-large)*.5*var(--n)*var(--small)) ;
}
option::before {
    width: 2px;
    height: 0.875em;
    background: currentcolor;
    content: "";
}

<form style="--min: 40; --val: 40.9; --max: 60; --n: 2">
    <label for="r">Price range</label>
    <input id="r" type="range" value="40.9" list="l"/>
    <output for="r"></output>
    <datalist id="l">
        <option class="first" value="40">40</option>
        <option class="mid">50</option>
        <option class="seventh" value="60">60</option>
    </datalist>
</form>

codepen 在这里，包含所有代码：https://codepen.io/Carlo-Jacques/pen/wvRVvJr

提前感谢您的帮助。

我尝试使用 100% 而不是使用 100vw 作为轨道宽度，但这不起作用。我需要轨道宽度和数据来完全填充它所在的 div。

html css dom 幻灯片 rangeslider

答： 暂无答案

上一个：如何使用 document.queryselector（）编辑元素的 HTML 属性？[已结束]

下一个：DOM-Manipulation - 单击文本时显示不同的元素

寻求专业知识：如何完美地对齐范围滑块的拇指和值显示？

Seeking Expertise: How Can I Align a Range Slider's Thumb and Value Display Perfectly?

评论