JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<label>
    <input type="range" id="one" min="0" max="3" step="0.5" value="2">
    <output for="one" style="--min: 0;--max: 3"></output>
</label>  
<label style="--c: #BD1550">
    <input type="range" id="two" min="-50" max="50" step="1" value="0">
    <output class="bottom" for="two" style="--min: -50;--max: 50"></output>
</label>

CSS

@property --val {
            syntax: "<integer>";
            inherits: true;
            initial-value: 0;
        }

        label {
            --c: #547980; /* slider color */
            --g: round(0.3em, 1px); /* the gap */
            --l: round(0.2em, 1px); /* line thickness*/
            --s: round(1.3em, 1px); /* thumb size*/
            --t: round(0.8em, 1px); /* tooltip tail size */
            --r: round(0.8em, 1px); /* tooltip radius */

            timeline-scope: --thumb-view;
            position: relative; /* No, It's not useless so don't remove it (or remove it and see what happens) */
            font-size: 24px;
        }

        input {
            width: 400px;
            height: var(--s); /* needed for Firefox*/
            --_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
            appearance: none;
            background: none;
            cursor: pointer;
            overflow: hidden;
            font-size: inherit;
        }
        input:focus-visible,
        input:hover {
            --p: 25%;
        }
        input:active,
        input:focus-visible {
            --_b: var(--s);
        }
        /* chromium */
        input[type="range" i]::-webkit-slider-thumb {
            height: var(--s);
            aspect-ratio: 1;
            border-radius: 50%;
            box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
            border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1 /
                calc(50% - var(--l) / 2) 100vw/0 calc(100vw + var(--g));
            -webkit-appearance: none;
            appearance: none;
            transition: 0.3s;
            anchor-name: --thumb;
            view-timeline: --thumb-view inline;
        }
        /* Firefox */
        input[type="range"]::-moz-range-thumb {
            height: var(--s);
            width: var(--s);
            background: none;
            border-radius: 50%;
            box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
          ...

JavaScript

const oneInput = document.getElementById('one');
    const oneOutput = document.querySelector('output[for="one"]');

    const twoInput = document.getElementById('two');
    const twoOutput = document.querySelector('output[for="two"]');

    function updateOutput(input, output) {
        output.value = parseFloat(input.value).toFixed(1); // Adjust to show one decimal place
    }

    oneInput.addEventListener('input', () => updateOutput(oneInput, oneOutput));
    twoInput.addEventListener('input', () => updateOutput(twoInput, twoOutput));

    // Initialize outputs
    updateOutput(oneInput, oneOutput);
    updateOutput(twoInput, twoOutput);