$(document).ready(function () {
    SliderInputInitializer.initAll();
});

declare let noUiSlider;

class SliderInputInitializer {
    static readonly sliderSelector = '.custom-slider-input';

    public static initAll() {
        $(this.sliderSelector).each((i, item) => {
            SliderInputInitializer.init(item);
        });
    }

    public static init(sliderElement) {
        let slider = noUiSlider.create(sliderElement, {
            start: 0,
            connect: 'lower',
            range: {
                'min': 0,
                'max': 100
            },
            step: 1
        });

        slider.on("update", function (value) {
            let sliderUpdatedEvent = new CustomEvent("slider:update", {
                "detail": value
            });
            this.target.dispatchEvent(sliderUpdatedEvent);
        });

        return slider;
    }
}