73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import * as noUiSlider from 'nouislider'
|
|
import '../../../scss/base/forms/range.scss'
|
|
|
|
interface HTMLElementWithNoUiSlider extends HTMLElement {
|
|
noUiSlider: noUiSlider.API
|
|
}
|
|
|
|
export function rangeInit() {
|
|
const priceSlider = document.querySelector<HTMLElement>('[data-range-slider]')
|
|
|
|
if (!priceSlider) {
|
|
return
|
|
}
|
|
|
|
const from = priceSlider.getAttribute('data-range-slider-from') || '0'
|
|
const to = priceSlider.getAttribute('data-range-slider-to') || '100'
|
|
|
|
noUiSlider.create(priceSlider as HTMLElementWithNoUiSlider, {
|
|
start: [Number(from), Number(to)],
|
|
connect: true,
|
|
range: {
|
|
min: Number(from),
|
|
max: Number(to),
|
|
},
|
|
})
|
|
|
|
const priceStart = document.querySelector<HTMLInputElement>('[data-range-slider-min]')
|
|
const priceEnd = document.querySelector<HTMLInputElement>('[data-range-slider-max]')
|
|
|
|
if (!priceStart || !priceEnd) {
|
|
return
|
|
}
|
|
|
|
priceStart.value = from
|
|
priceEnd.value = to
|
|
|
|
const typedSlider = priceSlider as HTMLElementWithNoUiSlider
|
|
|
|
function setPriceValues() {
|
|
if (!priceStart || !priceEnd) {
|
|
return
|
|
}
|
|
|
|
let priceStartValue: number | null = null
|
|
let priceEndValue: number | null = null
|
|
|
|
if (priceStart.value !== '') {
|
|
priceStartValue = Number(priceStart.value)
|
|
}
|
|
if (priceEnd.value !== '') {
|
|
priceEndValue = Number(priceEnd.value)
|
|
}
|
|
typedSlider.noUiSlider.set([priceStartValue, priceEndValue])
|
|
}
|
|
|
|
function setValue() {
|
|
if (!priceStart || !priceEnd) {
|
|
return
|
|
}
|
|
|
|
const sliderValueNumber = typedSlider.noUiSlider.get(true) as number[]
|
|
|
|
priceStart.value = Math.round(sliderValueNumber[0]).toString()
|
|
priceEnd.value = Math.round(sliderValueNumber[1]).toString()
|
|
}
|
|
|
|
priceStart.addEventListener('change', setPriceValues)
|
|
priceEnd.addEventListener('change', setPriceValues)
|
|
typedSlider.noUiSlider.on('slide', setValue)
|
|
}
|
|
|
|
rangeInit()
|