gpt4 book ai didi

javascript - 带输出的 HTML 范围 slider

转载 作者:行者123 更新时间:2023-11-30 12:22:15 25 4
gpt4 key购买 nike

所以我一直在尝试创建与此类似的东西,请注意示例 1: Bootstrap Slider .

正如您从以下示例中看到的那样,输出 具有固定到 slider 拇指上并使用 bootstrap tooltip 的效果。 用于样式。

对齐方式: -我已经看到其他人试图创建这种效果,但是当您滑动它时,输出 似乎永远不会与拇指完美地保持一致,这是一个示例:

enter image description here

作为设计师和前端开发人员,像素完美的设计非常重要,因此完美内联是必须的。

Bootstrap 示例效果很好,但它使用了很多我真的不需要的 javascript,我只想使用带有 type="range" 的 HTML 输入元素,并且根据一些 javascript 来设计它的功能。

这是我目前所拥有的:

var r = document.querySelectorAll('input[type=range]'), 
prefs = ['webkit-slider-runnable', 'moz-range'],
styles = [],
l = prefs.length,
n = r.length;

var getTrackStyleStr = function(el, j) {
var str = '',
min = el.min || 0,
perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,
val = perc + '% 100%';

for(var i = 0; i < l; i++) {
str += "input[type=range][data-rangeId='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} ';
}
return str;
};

var setDragStyleStr = function(evt) {
var trackStyle = getTrackStyleStr(evt.target, this);
styles[this].textContent = trackStyle;
};

for(var i = 0; i < n; i++) {
var s = document.createElement('style');
document.body.appendChild(s);
styles.push(s);
r[i].setAttribute('data-rangeId', i);
r[i].addEventListener('input', setDragStyleStr.bind(i), false);
}

function outputUpdate(value) {
document.querySelector('#slider').value = value;
}
html {
background: #393939;
}

input[type='range'] {
display: block;
margin: 2.5em auto;
border: solid .5em transparent;
padding: 0;
width: 15.5em;
height: 1em;
border-radius: .25em;
background: transparent;
font-size: 1em;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-webkit-slider-runnable-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-moz-range-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-ms-track {
border: none;
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
color: transparent;
}
input[type='range']::-ms-fill-lower {
border-radius: 0.25em;
background: #e44e4f;
}
input[type='range']::-webkit-slider-runnable-track {
background-size: 0% 100%;
}
input[type='range']::-moz-range-track {
background-size: 0% 100%;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.125em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-moz-range-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
box-shadow: 0 0 0.25em #e44e4f;
}
output {
color: white;
}
    <div>
<input id="range" type="range" value="0" oninput="outputUpdate(value)">
<output for=range id=slider>0</output>
</div>
<div><input type="range" value="0"></div>
<div><input type="range" value="0"></div>

我还包含了代码的外部链接 JS Bin

任何帮助将不胜感激!!

最佳答案

让它在输入元素的宽度范围内跟踪鼠标的 x 位置并根据输入元素在文档中的位置设置其 y 位置怎么样?请参阅下面的代码段。如果有的话,我的回答太流畅了(实际上比稍微不稳定的输入本身更流畅)。如果您希望它跟随输入的波动,只需编写一些代码将 px 值更改为百分比(与输入一样),然后从那里开始。

否则,我认为这就是您要找的答案。只需根据您的喜好更改样式即可(我做了一个快速的工作只是为了让它真正起作用)

哦,在加载文档和调整大小时运行函数。这样它就从正确的位置开始并保持在那里

var r = document.querySelectorAll('input[type=range]'),
prefs = ['webkit-slider-runnable', 'moz-range'],
styles = [],
l = prefs.length,
n = r.length;

var getTrackStyleStr = function (el, j) {
var str = '',
min = el.min || 0,
perc = (el.max) ? ~~ (100 * (el.value - min) / (el.max - min)) : el.value,
val = perc + '% 100%';

for (var i = 0; i < l; i++) {
str += "input[type=range][data-rangeId='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} ';
}
return str;
};

var setDragStyleStr = function (evt) {
var trackStyle = getTrackStyleStr(evt.target, this);
styles[this].textContent = trackStyle;
};

for (var i = 0; i < n; i++) {
var s = document.createElement('style');
document.body.appendChild(s);
styles.push(s);
r[i].setAttribute('data-rangeId', i);
r[i].addEventListener('input', setDragStyleStr.bind(i), false);
}

var mouseDown = false;
var el = document.querySelector("#slider");
var input = document.querySelector("#this");

function outputUpdate(value) {
el.value = value;
el.style.top = input.offsetTop + 30 + "px";
}

(function () {
document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;

event = event || window.event; // IE-ism

// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX === null && event.clientX !== null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;

event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
if (mouseDown) {
if (event.pageX < input.offsetLeft + 14) {
el.style.left = input.offsetLeft + "px";
} else if (event.pageX > input.offsetLeft + input.clientWidth) {
el.style.left = input.offsetLeft + input.clientWidth - 14 + "px";
} else {
el.style.left = event.pageX - 15 + "px";
}
// Use event.pageX / event.pageY here}
}
}
})();
html {
background: #393939;
}

input[type='range'] {
display: block;
margin: 2.5em auto;
border: solid .5em transparent;
padding: 0;
width: 15.5em;
height: 1em;
border-radius: .25em;
background: transparent;
font-size: 1em;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-webkit-slider-runnable-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-moz-range-track {
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
}
input[type='range']::-moz-range-track {
background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;
}
input[type='range']::-ms-track {
border: none;
width: 15.5em;
height: 0.5em;
border-radius: 0.25em;
background: #fff;
color: transparent;
}
input[type='range']::-ms-fill-lower {
border-radius: 0.25em;
background: #e44e4f;
}
input[type='range']::-webkit-slider-runnable-track {
background-size: 0% 100%;
}
input[type='range']::-moz-range-track {
background-size: 0% 100%;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.125em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-moz-range-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-thumb {
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
box-shadow: 0 0 0.125em #333;
background: #fff;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
box-shadow: 0 0 0.25em #e44e4f;
}
output {
color: white;
background-color: red;
padding: 5px 10px;
position: absolute;
}
output::before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent #ff0000 transparent;
position: absolute;
top: -10px;
content: " ";
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><div>
<input id="this" type="range" value="0" onmousedown="mouseDown = true;" onmouseup="mouseDown = false;" oninput="outputUpdate(value)">
<output for="range" id="slider">0</output>
</div>
<div><input type="range" value="0"></div>
<div><input type="range" value="0"></div>

关于javascript - 带输出的 HTML 范围 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30630854/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com