JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<p>
    <label for="amount">Maximum price:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range-min"></div>

CSS

.ui-slider .ui-slider-handle {
    border-radius: 1em;
    font-size: 24px;
    top: -.33em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    outline: none;
}

JavaScript

/* this is the touchpunch plugin 
    reference it to your project file insetead
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);



// this is the normal jQuery UI slider configuration taken directly from: http://jqueryui.com/slider/#rangemin
$("#slider-range-min").slider({
    range: "min",
    value: 37,
    min: 1,
    max: 700,
    slide: function (event, ui) {
        $("#amount").val("$" + ui.value);
    }
});
$("#amount").val("$" + $("#slider-range-min").slider("value"));