所以我一直在尝试创建类似于此的东西,请注意示例1:Bootstrap Slider。带输出的HTML范围滑块
正如可以从下面的例子中output
看到具有被固定在滑块,以及使用该bootstrap tooltip用于定型的效果。
阵营: - 我看到其他人试图创建这种效果,但output
似乎从来没有与你一起滑动拇指留下完美内嵌,这里有一个例子:
作为一名设计师和前端开发人员,重要的是设计是像素完美的,所以这是完美的内联是必须的。
Bootstrap示例效果很好,但它使用了大量的JavaScript,我真的不需要,我只想使用HTML输入元素与type="range"
,并根据一个小的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
的外部链接的任何帮助,将不胜感激!
你说的引导例子效果很好,但包括你不需要额外的JS。为什么不从他的bootstrap版本开始,并开始将其配对到只有你需要的? –
有1400行javascript,我认为只要扩展到我已有的东西就更容易了。 – Jordan
另外我很确定你必须保留所有的许可证和原始代码的作者在文档顶部的评论部分,我宁愿不这样做。 – Jordan