<div id="slider"></div>

<br>
<br>
<br>
<input type="text" class="result" id="result0">
<input type="text" class="result" id="result1">
body {
	box-sizing: border-box;
	padding: 30px;
	background-color: #ccc;
}

.noUi-target {
    background: #617a26;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.noUi-horizontal {
    height: 12px;
}

.noUi-value {
    top: 15px;
}

.noUi-marker {
    background: #4b4b4b;
    top: 9px;
}

.noUi-marker-horizontal.noUi-marker {
    margin-left: 0px;
    width: 1px;
    height: 9px;
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 13px;
    background: #617a26;
    top: 7px;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 19px;
    background: #fff;
    top: 2px;
}

.noUi-value {
    color: white;
    font-family: "Segoe UI";
    font-size: 15px;
    font-weight: 400;
}

.noUi-value-sub {
    color: #838383;
    font-family: "Segoe UI";
    font-size: 12px;
    font-weight: 400;
    top: 18px;
}

.noUi-handle {
    border: 0;
    border-radius: 2px;
    background: #ffd800;
    cursor: default;
    box-shadow: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
}

.noUi-horizontal .noUi-handle {
    width: 30px;
    height: 30px;
    left: -15px;
    top: -6px;
}

html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
    right: -15px;
    left: auto;
}

.noUi-tooltip {
    display: block;
    position: absolute;
    border: 0;
    border-radius: 3px;
    background: #151317;
    color: white;
    font-family: "Segoe UI";
    font-size: 11px;
    font-weight: 400;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    width: 28px;
    height: 16px;
    line-height: 15px;
}

.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 13px;
}

.noUi-handle::after,
.noUi-handle::before,
.noUi-handle::after,
.noUi-handle::before {
    content: none;
}

.noUi-pips-horizontal {
    padding: 0;
    height: 60px;
}

.noUi-connect {
    background: rgb(137, 174, 15);
}
var slider = document.getElementById("slider");

noUiSlider.create(slider, {
	start: [900, 1650],
	range: {
		min: [0, 150],
		"30%": [1500, 50],
		"70%": [2000, 50],
		max: [2500]
	},
	step: 1,
	behaviour: "tap-drag",
	connect: true,
	tooltips: [wNumb({ decimals: 0 }), wNumb({ decimals: 0 })],
	pips: {
		// mode: 'positions',
		// values: [0, 25, 50, 75, 100],
		density: 5,
		// stepped: true,
		mode: "steps",
		// density: 3,
		filter: filterPips,
		format: wNumb({
		// Форматируем деления
		decimals: 0,
		// prefix: '€'
		})
	},
    format: wNumb({
			// Форматируем результат
        decimals: 0,
        // thousand: '.',
        // suffix: ' (US $)'
    })
});

// Находим инпут для вывод результата лсайдера
var result0 = document.getElementById('result0');
var result1 = document.getElementById('result1');


slider.noUiSlider.on('update', function (values, handle) {
	result0.value = values[0];
	result1.value = values[1];
});

result.addEventListener('input', function () {
    slider.noUiSlider.set(this.value);
});



function filterPips(value, type) {
	// Формируем шкалу
	if (type === 0) {
		return value < 0 ? -1 : 0;
	}
	if (value % 500) {
		return 0;
	} else {
		return 1;
	}
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js