Filtro gamma personalizzata di passaggio di default sul Blazor

voti
0

Im cercando di fare un filtro gamma con 2 gestori e ho trovato un file JavaScript e CSS per esso, il problema è quando faccio funzionare il progetto appare il filtro gamma personalizzato e dopo 1 secondo passare a default. Si può vedere questo problema in questo repository GitHub eseguendo il progetto e facendo attenzione nel filtro range e aggiornare la pagina.

Codice HTML:

<input type=range multiple value=0,100 />

Codice CSS:

@supports (--css: variables) {
    input[type=range].multirange {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

        input[type=range].multirange.original {
            position: absolute;
        }

            input[type=range].multirange.original::-webkit-slider-thumb {
                position: relative;
                z-index: 2;
            }

            input[type=range].multirange.original::-moz-range-thumb {
                transform: scale(1); /* FF doesn't apply position it seems */
                z-index: 1;
            }

        input[type=range].multirange::-moz-range-track {
            border-color: transparent; /* needed to switch FF to styleable control */
        }

        input[type=range].multirange.ghost {
            position: relative;
            background: var(--track-background);
            --track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0 ) no-repeat 0 45% / 100% 40%;
            --range-color: hsl(190, 80%, 40%);
        }

            input[type=range].multirange.ghost::-webkit-slider-runnable-track {
                background: var(--track-background);
            }

            input[type=range].multirange.ghost::-moz-range-track {
                background: var(--track-background);
            }
}

Codice JavaScript:

(function () {
    use strict;

    var supportsMultiple = self.HTMLInputElement && valueLow in HTMLInputElement.prototype;

    var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, value);

    var multirange = function (input) {
        if (supportsMultiple || input.classList.contains(multirange)) {
            return;
        }

        var value = input.getAttribute(value);
        var values = value === null ? [] : value.split(,);
        var min = +(input.min || 0);
        var max = +(input.max || 100);
        var ghost = input.cloneNode();

        input.classList.add(multirange, original);
        ghost.classList.add(multirange, ghost);

        input.value = values[0] || min + (max - min) / 2;
        ghost.value = values[1] || min + (max - min) / 2;

        input.parentNode.insertBefore(ghost, input.nextSibling);

        Object.defineProperty(input, originalValue, descriptor.get ? descriptor : {
            // Fuck you Safari >:(
            get: function () { return this.value; },
            set: function (v) { this.value = v; }
        });

        Object.defineProperties(input, {
            valueLow: {
                get: function () { return Math.min(this.originalValue, ghost.value); },
                set: function (v) { this.originalValue = v; },
                enumerable: true
            },
            valueHigh: {
                get: function () { return Math.max(this.originalValue, ghost.value); },
                set: function (v) { ghost.value = v; },
                enumerable: true
            }
        });

        if (descriptor.get) {
            // Again, fuck you Safari
            Object.defineProperty(input, value, {
                get: function () { return this.valueLow + , + this.valueHigh; },
                set: function (v) {
                    var values = v.split(,);
                    this.valueLow = values[0];
                    this.valueHigh = values[1];
                    update();
                },
                enumerable: true
            });
        }

        if (typeof input.oninput === function) {
            ghost.oninput = input.oninput.bind(input);
        }

        function update() {
            ghost.style.setProperty(--low, 100 * ((input.valueLow - min) / (max - min)) + 1 + %);
            ghost.style.setProperty(--high, 100 * ((input.valueHigh - min) / (max - min)) - 1 + %);
        }

        ghost.addEventListener(mousedown, function passClick(evt) {
            // Are the ghost and input elements inverted? (ghost is lower range)
            var isInverted = input.valueLow == ghost.value;
            // Find the horizontal position that was clicked (as a percentage of the element's width)
            var clickPoint = evt.offsetX / this.offsetWidth;
            // Map the percentage to a value in the range (note, assumes a min value of 0)
            var clickValue = max * clickPoint;

            // Get the distance to both high and low values in the range
            var highDiff = input.valueHigh - clickValue;
            var lowDiff = Math.abs(input.valueLow - clickValue);

            if (isInverted ? highDiff < lowDiff : lowDiff < highDiff) {
                // The low value is closer to the click point than the high value
                // We should update the low value input
                var passEvent = new MouseEvent(mousedown, evt);
                // Pass a new event to the low input element (which is obscured by the
                // higher ghost element, and doesn't get mouse events outside the drag handle
                input.dispatchEvent(passEvent);
                // The higher ghost element should not respond to this event
                evt.preventDefault();
                return false;
            }
        });
        input.addEventListener(input, update);
        ghost.addEventListener(input, update);

        update();
    }

    multirange.init = function () {
        [].slice.call(document.querySelectorAll(input[type=range][multiple]:not(.multirange))).forEach(multirange);
    }

    if (typeof module === undefined) {
        self.multirange = multirange;
        if (document.readyState == loading) {
            document.addEventListener(DOMContentLoaded, multirange.init);
        }
        else {
            multirange.init();
        }
    } else {
        module.exports = multirange;
    }

})();

Grazie per l'attenzione.

È pubblicato 24/10/2019 alle 13:01
fonte dall'utente
In altre lingue...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more