JSFiddle - React, Tailwind, and code Playground

by Tech Savant

HTML

<link rel="stylesheet" href="http://refreshless.com/noUiSlider/distribute/nouislider.min.css">
<script src="http://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<script src="http://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<div id="left">
    some stuff
</div>

<div id="right">
    


<div class="sliders" id="red">
		<a class="controls-symbols slider-minus" id="slider-amount-minus"><i class="fa fa-minus"></i></a>
		<a class="controls-symbols slider-plus" id="slider-amount-plus"><i class="fa fa-plus"></i></a>
	</div>

    
</div>

CSS

.sliders .controls-symbols,
.rail .controls-symbols {
    display: block;
    position: absolute;
    top: 0;
    width: 30px;
    height: 20px;
    line-height: 17px;
    text-align: center;
    background: #144b95;
    font-weight: bold;
    font-size: 14px;
    z-index: 3;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#left {
    width: 48%;
    float: left;
    display: inline-block;
}
#right {
    width: 48%;
    float: right;
    display: inline-block;

}

.sliders .controls-symbols.slider-minus,
.rail .controls-symbols.slider-minus {
    left: 0;
    border-radius: 5px 0px 0px 5px;
}
.sliders .controls-symbols.slider-plus,
.rail .controls-symbols.slider-plus {
    right: 0;
    border-radius: 0px 5px 5px 0px;
}
.sliders .noUi-handle,
.rail .noUi-handle {
    background-color: #5985d5;
    font-weight: bold;
    font-size: 20px;
    line-height: 41px;
    text-align: center;
    width: 118px;
    height: 41px;
    border-bottom: 2px solid #144b95;
    color: #ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: relative;
    top: -11px;
    left: -59px;
    z-index: 1;
    cursor: pointer;
}

.sliders .noUi-handle:hover,
.sliders .noUi-handle.noUi-active,
.rail .noUi-handle:hover,
.rail .noUi-handle.noUi-active {
    background-color: #000;
    color: #ffffff;
}
.noUi-marker-horizontal.noUi-marker-large {
	height: 12px !important;
}
.noUi-marker-horizontal.noUi-marker {
	height: 8px;
}
.noUi-value-horizontal {
	padding-top: 15px;
}
.noUi-handle{
	border: none;
	box-shadow: none;
}
.noUi-handle::after, .noUi-handle::before{
	content: none;
	display: none;
}

.noUi-pips .noUi-marker:first-of-type,
.noUi-pips .noUi-marker:last-of-type {
	display: none;
}

JavaScript

$(document).ready(function(){

	var sliders = document.getElementById('red'),
		input = document.getElementById('handle'),
		sliderPlus = document.getElementById('slider-amount-plus'),
		sliderMinus = document.getElementById('slider-amount-minus'),
		termCur = 500;

	noUiSlider.create(sliders, {
		start: termCur,
		step: 50,
		connect: "lower",
		range: {
			'min': 0,
			'max': 1100
		},
		pips: {
			mode: 'values',
			values: [100, 500, 1000],
			density: 4.5
		}
	});
	$('<div class="value">' + termCur + ' zł' + '</div>').appendTo($('.noUi-handle', sliders));
    

    
    
    

 

});
var initTotalWidth = $(".noUi-base").width();
var initPosition = $(".noUi-handle").offset().left;
var handleWidth = $(".noUi-handle").width();
var initLeftBoundary = initPosition - initTotalWidth/2;
var initRightBoundary = initPosition + initTotalWidth/2;
var currentPosition = initPosition;
initRightBoundary = initRightBoundary - (handleWidth/2+handleWidth/20);
initLeftBoundary = initLeftBoundary + handleWidth;




    $(document).mousemove(function (e) {
        
        var newPosition = $(".noUi-handle").offset().left;
        console.dir('new: '+newPosition); 
        console.dir('init: '+initPosition);
        console.dir('tw: '+initTotalWidth);
        console.dir('hw: '+handleWidth);
        console.dir('left: '+initLeftBoundary);
        console.dir('right: '+initRightBoundary);
        
        if (newPosition != currentPosition) {
            currentPosition = newPosition;
        
        
    
        if (newPosition < initLeftBoundary) {
           
         $(".slider-minus").hide();
        } else {
            
            $(".slider-minus").show();
        }
        
        if (newPosition > initRightBoundary) {
          $(".slider-plus").hide();
         
           
        } else {
           

            $(".slider-plus").show();
        }
        }
});

$.fn.trueWidth = function() {  
 
        return ( ( $.browser.msie && this.get()[0].nodeType === 9 )...