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