Dashboard 2 Slider from center, like audio balance slider

Dashboard
1

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!

2

Simple example:

image
image562Ă—380 17.1 KB

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.

3

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

image
image446Ă—437 19.3 KB

2 Likes
4

Can you post up the json for this - maybe even in the projects section for everyone to learn from/copy ?

regards

Craig

5

Sure I can, the upper part is the standard dashboard 2 gauge and the lower part is bakman2 example with the css styles a little changed. Here is my version:

<template>
    <div class="panning-knob">
        <label class="pan-label">10m Trend (<span v-text="value"></span>)</label>
        <input
            type="range"
            min="-30"
            max="30"
            v-model="value"
            @input="send(value)"
            class="slider"
        />
        <div class="pan-indicator">
            <span :class="{ activeL: value < -10 }">Rainy</span>
            <span :class="{ activeM: value >= -10 && value <= 10 }">Stable</span>
            <span :class="{ activeR: value > 10 }">Clearing</span>
        </div>
    </div>
</template>

<style scoped>
    .panning-knob {
        width: 320px;
        padding: 20px 10px 10px 10px;
        background: white;
        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: black;
        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: green;
        border: 1px 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 .activeL {
        color: blue;
        opacity: 1;
    }
    .pan-indicator .activeM {
        color: green;
        opacity: 1;
    }
    .pan-indicator .activeR {
        color: gold;
        opacity: 1;
    }
</style>

Both are fed by a pressure sensor, the gauge directly and the trend calculator by a function that gets the current pressure vs what the pressure was 10min ago (with a delay node).

1 Like