Dashboard 2 Slider from center, like audio balance slider

[repho]

Hi, I'm new to NR and loving it so far.

I would like to add a slider on my dashboard but I need it to work from center, like -10...0...10. Something like how a balance slider on a audio device works. It would need to fill the track from 0 and maybe have different colors for +/- part of the track.

Is this easy to do with the current Dashboard 2 slider?

Thanks!

[bakman2]

Simple example:

Put in a (dashboard) template node:

<template>
    <div class="panning-knob">
        <label class="pan-label">Pan (<span v-text="value"></span>)</label>
        <input
      type="range"
      min="-10"
      max="10"
      v-model="value"
      @input="send(value)"
      class="slider"
    />
        <div class="pan-indicator">
            <span :class="{ active: value < 0 }">L</span>
            <span :class="{ active: value == 0 }">C</span>
            <span :class="{ active: value > 0 }">R</span>
        </div>
    </div>
</template>

<style scoped>
    .panning-knob {
        width: 200px;
        padding: 20px 10px 10px 10px;
        background: #23272a;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pan-label {
        color: #eee;
        font-size: 14px;
        margin-bottom: 6px;
        letter-spacing: 1px;
    }

    .slider {
        width: 100%;
        margin: 0 0 8px 0;
        -webkit-appearance: none;
        background: linear-gradient(90deg, #2196f3 0%, #eee 50%, #f44336 100%);
        height: 8px;
        border-radius: 4px;
        outline: none;
        transition: background 0.3s;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffeb3b;
        border: 2px solid #333;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        transition: background 0.2s;
    }

    .slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffeb3b;
        border: 2px solid #333;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        transition: background 0.2s;
    }

    .slider::-ms-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffeb3b;
        border: 2px solid #333;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        transition: background 0.2s;
    }

    .slider:focus {
        outline: none;
    }

    .pan-indicator {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 13px;
        color: #888;
        margin-top: 2px;
    }

    .pan-indicator span {
        flex: 1;
        text-align: center;
        font-weight: bold;
        opacity: 0.7;
    }

    .pan-indicator .active {
        color: #ffeb3b;
        opacity: 1;
    }
</style>

attach a debug node to see the emitted value.

[repho]

Hey, amazing, exactly what I needed!
Thank you so much!
Adapted to what I was aiming for: