1
所以我一直在嘗試創建類似於此的東西，請注意示例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