我使用范围滑块使用jquery和jquery afterclass插件（代码集中的代码）为项目创建滑块，到目前为止我已到达此处：codepen。
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return 0!==a.offsetWidth||0!==a.offsetHeight?!1:!0}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){var c=f(a),d=c.length,e=[],g=a[b];if(d){for(var h=0;d>h;h++)e[h]=c[h].style.display,c[h].style.display="block",c[h].style.height="0",c[h].style.overflow="hidden",c[h].style.visibility="hidden";g=a[b];for(var i=0;d>i;i++)c[i].style.display=e[i],c[i].style.height="",c[i].style.overflow="",c[i].style.visibility=""}return g}function h(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},m,e),this._defaults=m,this._name=i,this.startEvent=this.options.startEvent.join("."+i+" ")+"."+i,this.moveEvent=this.options.moveEvent.join("."+i+" ")+"."+i,this.endEvent=this.options.endEvent.join("."+i+" ")+"."+i,this.polyfill=this.options.polyfill,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.polyfill&&l)return!1;this.identifier="js-"+i+"-"+k++,this.min=parseFloat(this.$element[0].getAttribute("min")||0),this.max=parseFloat(this.$element[0].getAttribute("max")||100),this.value=parseFloat(this.$element[0].value||this.min+(this.max-this.min)/2),this.step=parseFloat(this.$element[0].getAttribute("step")||1),this.$fill=a('<div class="'+this.options.fillClass+'" />'),this.$handle=a('<div class="'+this.options.handleClass+'" />'),this.$range=a('<div class="'+this.options.rangeClass+'" id="'+this.identifier+'" />').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+i,d(function(){c(function(){f.update()},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+i,function(a,b){if(!b||b.origin!==i){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}var i="rangeslider",j=[],k=0,l=b(),m={polyfill:!0,rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]};h.prototype.init=function(){this.onInit&&"function"==typeof this.onInit&&this.onInit(),this.update()},h.prototype.update=function(){this.handleWidth=g(this.$handle[0],"offsetWidth"),this.rangeWidth=g(this.$range[0],"offsetWidth"),this.maxHandleX=this.rangeWidth-this.handleWidth,this.grabX=this.handleWidth/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position)},h.prototype.handleDown=function(a){if(a.preventDefault(),this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect().left,d=this.getPositionFromNode(this.$handle[0])-c;this.setPosition(b-this.grabX),b>=d&&b<d+this.handleWidth&&(this.grabX=b-d)}},h.prototype.handleMove=function(a){a.preventDefault();var b=this.getRelativePosition(a);this.setPosition(b-this.grabX)},h.prototype.handleEnd=function(a){a.preventDefault(),this.$document.off(this.moveEvent,this.handleMove),this.$document.off(this.endEvent,this.handleEnd),this.onSlideEnd&&"function"==typeof this.onSlideEnd&&this.onSlideEnd(this.position,this.value)},h.prototype.cap=function(a,b,c){return b>a?b:a>c?c:a},h.prototype.setPosition=function(a){var b,c;b=this.getValueFromPosition(this.cap(a,0,this.maxHandleX))/this.step*this.step,c=this.getPositionFromValue(b),this.$fill[0].style.width=c+this.grabX+"px",this.$handle[0].style.left=c+"px",this.setValue(b),this.position=c,this.value=b,this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(c,b)},h.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},h.prototype.getRelativePosition=function(a){var b=this.$range[0].getBoundingClientRect().left,c=0;return"undefined"!=typeof a.pageX?c=a.pageX:"undefined"!=typeof a.originalEvent.clientX?c=a.originalEvent.clientX:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0].clientX?c=a.originalEvent.touches[0].clientX:a.currentPoint&&"undefined"!=typeof a.currentPoint.x&&(c=a.currentPoint.x),c-b},h.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=b*this.maxHandleX},h.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandleX||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(2))},h.prototype.setValue=function(a){a!==this.value&&this.$element.val(a).trigger("change",{origin:i})},h.prototype.destroy=function(){this.$document.off(this.startEvent,"#"+this.identifier,this.handleDown),this.$element.off("."+i).removeAttr("style").removeData("plugin_"+i),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0]),j.splice(j.indexOf(this.$element[0]),1),j.length||this.$window.off("."+i)},a.fn[i]=function(b){return this.each(function(){var c=a(this),d=c.data("plugin_"+i);d||(c.data("plugin_"+i,d=new h(this,b)),j.push(this)),"string"==typeof b&&d[b]()})}});
/*jslint browser: true*/
/*global $, jQuery */
/**
* jQuery alterClass plugin
*
* Remove element classes with wildcard matching. Optionally add classes:
* $( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' )
*
* Copyright (c) 2011 Pete Boere (the-echoplex.net)
* Free under terms of the MIT license: http://www.opensource.org/licenses/mit-license.php
*
*/
(function ($) {
$.fn.alterClass = function ( removals, additions ) {
var self = this;
if ( removals.indexOf( '*' ) === -1 ) {
// Use native jQuery methods if there is no wildcard matching
self.removeClass( removals );
return !additions ? self : self.addClass( additions );
}
var patt = new RegExp( '\\s' +
removals.
replace( /\*/g, '[A-Za-z0-9-_]+' ).
split( ' ' ).
join( '\\s|\\s' ) +
'\\s', 'g' );
self.each( function ( i, it ) {
var cn = ' ' + it.className + ' ';
while ( patt.test( cn ) ) {
cn = cn.replace( patt, ' ' );
}
it.className = $.trim( cn );
});
return !additions ? self : self.addClass( additions );
};
})(jQuery);
function setSlider(me, pos, val) {
var finalPosHandle,
sliderFillWidth,
finalPos,
finalWidth,
maxValue,
colorCode,
colorSelector,
pointerW,
swidth = 400;
maxValue = me.max;
colorSelector = me.options.colorSelector;
if (val > swidth) {
colorCode = colorSelector[4].colorCode;
$('.slider-value').html('$400/Mo.');
$('.note').html('Which is equal to planting approximately 92 trees every year for 25 years!');
} else {
if (val >= ((swidth/4)*3)+1 && val <= swidth) {
colorCode = colorSelector[3].colorCode;
$('.slider-value').html('$300/Mo.');
$('.note').html('Which is equal to planting approximately 75 trees every year for 25 years!');
} else if (val >= ((swidth/4)*2)+1 && val <= (swidth/4)*3) {
colorCode = colorSelector[2].colorCode;
$('.slider-value').html('$200/Mo.');
$('.note').html('Which is equal to planting approximately 58 trees every year for 25 years!');
} else {
colorCode = colorSelector[0].colorCode;
$('.slider-value').html('$100/Mo.');
$('.note').html('Which is equal to planting approximately 36 trees every year for 25 years!');
}
}
finalPos = (val/5.2) + '%';
pointerW = (val/5.2) + 4 + '%';
finalWidth = (val/5.2) + 7 + '%';
finalPosHandle = (val/5.2) - 10 + '%';
if (val <= 15) {
finalPos = '3%';
pointerW = '9%';
finalWidth = '10%';
finalPosHandle = '-5.6%';
}
if ((val) >= 200) {
finalPosHandle = (val/5.2) - 35 + '%';
}
if ((val) >= 480) {
finalPos = '93%';
pointerW = '93%';
finalWidth = '100%';
finalPosHandle = '58%';
}
if($(window).width() <= 628) {
finalPosHandle = 0;
$('.rangeslider__handle .pointer').css({
left: pointerW
});
}
$('.rangeslider__handle.display').css({
left: finalPosHandle
});
$('.rangeslider .rangeslider__handle').css({
left: finalPos
});
$('.rangeslider__fill').css({
width: finalWidth
});
$('.cost-slider').alterClass( 'step-*', colorCode);
$('.svgburst').alterClass( 'step-*', colorCode);
}
// Initialize a new plugin instance for all
// e.g. $('input[type="range"]') elements.
$('input[type="range"]').rangeslider({
polyfill: false,
colorSelector : [{
"colorCode": "step-1"
}, {
"colorCode": "step-2"
}, {
"colorCode": "step-3"
}, {
"colorCode": "step-4"
}, {
"colorCode": "step-5"
}],
onInit: function(position, value) {
setSlider(this, position, value);
},
onSlide: function(position, value) {
setSlider(this, position, value);
},
onSlideEnd: function(position, value) {
setSlider(this, position, value);
}
});html {
box-sizing: border-box;
font-family: 'museo-sans',arial,sans-serif;
font-weight: 300;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*,*:before,*:after {
box-sizing: inherit;
}
body,html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #ffffff;
color: #5c6670;
line-height: 1.5;
}
section {
display: block;
text-align: center;
}
#content {
overflow: hidden;
}
h2 {
margin-bottom: 35px;
}
.rangeslider,
.rangeslider__fill {
background: #a1f188;
display: block;
width: 100%;
-moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
max-width: 480px;
height: 32px;
border-radius: 16px;
}
.rangeslider {
position: relative;
max-width: 480px;
height: 32px;
border-radius: 16px;
}
.rangeslider--disabled {
opacity: 0.4;
}
.rangeslider__fill {
background: #f26311;
position: absolute;
top: 0;
min-width: 7%;
max-width: 100%;
-webkit-box-shadow: none;
box-shadow: none;
}
.rangeslider__handle {
background: white;
border: 1px solid #fff;
cursor: pointer;
display: inline-block;
width: 17px;
height: 17px;
position: absolute;
top: 7px;
background-size: 100%;
background-image: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.rangeslider__handle:after {
display: none;
}
.rangeslider__handle:active {
background-image: none;
}
input[type="range"]:focus+.rangeslider .rangeslider__handle {
-moz-box-shadow: 0 0 8px rgba(255,0,255,0.9);
-webkit-box-shadow: 0 0 8px rgba(255,0,255,0.9);
box-shadow: 0 0 8px rgba(255,0,255,0.9);
}
.cost-slider {
font-family: 'myriad-pro',arial,sans-serif;
max-width: 480px;
position: relative;
padding-top: 0;
}
.cost-slider .display {
line-height: 21px;
position: relative;
margin: 0px auto 30px;
height: 35px;
padding: 6px 20px;
background: none repeat scroll 0% 0% #f26311;
border-radius: 20px;
border: medium none;
width: 100%;
text-align: center;
display: block;
}
.cost-slider .pointer {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 11px 0;
border-color: #f26321 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
bottom: -10px;
left: 14%;
}
.cost-slider .slider-value {
color: #333e48;
font-size: 1em;
font-weight: bold;
white-space: nowrap;
}
.step-1 .display,
.step-1 .rangeslider__fill {
background: #dde1e9;
}
.step-1 .pointer {
border-color: #dde1e9 transparent;
}
.step-1 g {
fill: #dde1e9;
}
.step-2 .display,
.step-2 .slider-value,
.step-2 .rangeslider__fill {
background: #8c949b;
color: #fff;
}
.step-2 .pointer {
border-color: #8c949b transparent;
left: 26%;
}
.step-2 g {
fill: #8c949b;
}
.step-3 .display,
.step-3 .slider-value,
.step-3 .rangeslider__fill {
background: #96bbc3;
}
.step-3 .pointer {
border-color: #96bbc3 transparent;
left: 43.5%;
}
.step-3 g {
fill: #96bbc3;
}
.step-4 .display,
.step-4 .slider-value,
.step-4 .rangeslider__fill {
background: #ffa400;
color: #fff;
}
.step-4 .pointer {
border-color: #ffa400 transparent;
left: 61.5%;
}
.step-4 g {
fill: #ffa400;
}
.step-5 .display,
.step-5 .slider-value,
.step-5 .rangeslider__fill {
background: #ff7f00;
color: #fff;
}
.step-5 .pointer {
border-color: #ff7f00 transparent;
left: 80.5%;
}
.step-5 g {
fill: #ff7f00;
}
@media screen and (min-width: 40em) {
.cost-slider {
padding-top: 37px;
margin: 0 auto;
}
.cost-slider .display {
line-height: 21px;
position: absolute;
top: -20px;
width: auto;
min-width: 180px;
height: 38px;
padding: 8px 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
}
.step-1 .pointer {
left: 28%;
}
.step-2 .pointer {
left: 27%;
}
.step-3 .pointer {
left: 75.5%;
}
.step-4 .pointer {
left: 74.5%;
}
.step-5 .pointer {
left: 80.5%;
}
}<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'>
</script>
</head>
<body>
<main>
<div id="content">
<section>
<div>
<h2>Monthly Power Costs</h2>
<div class="cost-slider">
<div class="rangeslider__handle display">
<span class="slider-value"></span>
<div class="pointer"></div>
</div>
<input type="range" min="0" max="520" data-rangeslider="">
<p class="note">That’s getting up there. We can make a dent in your bill.</p>
</div>
</div>
</section>
</div>
</main>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
</body>
</html>
现在您可以看到滑块上方有一个显示成本范围的气泡，如何在滑块下方创建该气泡呢？因为我需要在滑块上方和下方都有气泡来显示信息。
而且我还需要在鼠标悬停效果的滑块上显示点。例如，将有一个白色圆圈，当鼠标悬停时，它变为活动状态并变为黑色。 以下是我正在寻找的内容的模拟：slider mock up image
非常感谢帮助。感谢
