JSFiddle - React, Tailwind, and code Playground

by Ilya K

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

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;
}

.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: 10;
    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));


sliders.noUiSlider.on('change', function ( values, handle ) {
	if ( values[handle] < 100 ) {
		sliders.noUiSlider.set(100);
	} else if ( values[handle] > 1000 ) {
		sliders.noUiSlider.set(1000);
	}
});
sliders.noUiSlider.on('update', function( values ) {
	termCur = values;
	if( termCur >= 100 && termCur <= 1000 ) {
	$('.value', sliders).text(parseInt(termCur) + ' zł');}
});
sliderPlus.addEventListener('click', function(){
	if(termCur < 1000) {
		var setValue = parseInt(termCur) + 50;
		sliders.noUiSlider.set(setValue);
	}
});	
sliderMinus.addEventListener('click', function(){
	if(termCur > 100) {
		var setValue = parseInt(termCur) - 50;
		sliders.noUiSlider.set(setValue);
	}
});	
});