I'm using range slider to create a slider for a project with jquery and jquery afterclass plugin (code at codepen), so far I've reached here: 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(/[

\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>

Now as you can see there is a bubble above the slider that that shows cost ranges, how can I create that bubble below the slider too? As I need to have bubbles both above and below the slider showing information.

And also I need to show points on the slider with mouse hover effect. For example there will be a white circle and when mouse hover, it becomes active and turns black. Here is a mock up of what I am looking for: slider mock up image

Help will be much appreciated. Thanks