jellyfin-web/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js

define(['browser', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser) {

    var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);

    var supportsNativeProgressStyle = browser.firefox || browser.edge || browser.msie;
    var supportsValueSetOverride = false;

    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {

        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
        // descriptor returning null in webos
        if (descriptor && descriptor.configurable) {
            supportsValueSetOverride = true;
        }
    }

    function updateValues(range, backgroundLower, backgroundUpper) {

        //if (fraction === 0) {
        //    range.classList.add('is-lowest-value');
        //} else {
        //    range.classList.remove('is-lowest-value');
        //}

        if (backgroundLower) {
            var fraction = (range.value - range.min) / (range.max - range.min);

            backgroundLower.style.flex = fraction;
            backgroundLower.style.webkitFlex = fraction;
            backgroundUpper.style.flex = 1 - fraction;
            backgroundUpper.style.webkitFlex = 1 - fraction;
        }
    }

    EmbySliderPrototype.attachedCallback = function () {

        if (this.getAttribute('data-embycheckbox') == 'true') {
            return;
        }

        this.setAttribute('data-embycheckbox', 'true');

        this.classList.add('mdl-slider');
        this.classList.add('mdl-js-slider');

        var containerElement = this.parentNode;
        containerElement.classList.add('mdl-slider__container');

        if (!supportsNativeProgressStyle) {
            containerElement.insertAdjacentHTML('beforeend', '<div class="mdl-slider__background-flex"><div class="mdl-slider__background-lower"></div><div class="mdl-slider__background-upper"></div></div>');
        }

        var backgroundLower = containerElement.querySelector('.mdl-slider__background-lower');
        var backgroundUpper = containerElement.querySelector('.mdl-slider__background-upper');

        this.addEventListener('input', function () {
            this.dragging = true;
        });
        this.addEventListener('change', function () {
            this.dragging = false;
            updateValues(this, backgroundLower, backgroundUpper);
        });

        if (!supportsNativeProgressStyle) {

            if (supportsValueSetOverride) {
                this.addEventListener('valueset', function () {
                    updateValues(this, backgroundLower, backgroundUpper);
                });
            } else {
                startInterval(this, backgroundLower, backgroundUpper);
            }
        }
    };

    function startInterval(range, backgroundLower, backgroundUpper) {
        var interval = range.interval;
        if (interval) {
            clearInterval(interval);
        }
        range.interval = setInterval(function () {
            updateValues(range, backgroundLower, backgroundUpper);
        }, 100);
    }

    EmbySliderPrototype.detachedCallback = function () {

        var interval = this.interval;
        if (interval) {
            clearInterval(interval);
        }
        this.interval = null;
    };

    document.registerElement('emby-slider', {
        prototype: EmbySliderPrototype,
        extends: 'input'
    });
});