# Dashboard 2 Slider from center, like audio balance slider

**URL:** https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003
**Category:** Dashboard
**Created:** [10 May 2025 15:39 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003 "2025-05-10T15:39:24Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![repho](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@repho](https://discourse.nodered.org/u/repho)
#### Post date: [10 May 2025 15:39 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003/1 "2025-05-10T15:39:24Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [10 May 2025 17:09 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003/2 "2025-05-10T17:09:10Z")

</div>

Simple example:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/aff1477b1ff46ae5cac935599766b523015466be.png)

Put in a (dashboard) template node:

```auto
<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.

---

<div class="post-metadata">

### Author: ![repho](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@repho](https://discourse.nodered.org/u/repho)
#### Post date: [10 May 2025 17:14 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003/3 "2025-05-10T17:14:35Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9fd284731fd5a0b5b7f3051875ffab53d00f8241.png)

---

<div class="post-metadata">

### Author: ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)
#### Post date: [13 May 2025 23:32 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003/4 "2025-05-13T23:32:09Z")

</div>

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

regards

Craig

---

<div class="post-metadata">

### Author: ![repho](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@repho](https://discourse.nodered.org/u/repho)
#### Post date: [14 May 2025 03:39 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003/5 "2025-05-14T03:39:08Z")

</div>

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:

```auto
<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).

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [28 May 2025 03:39 UTC](https://discourse.nodered.org/t/dashboard-2-slider-from-center-like-audio-balance-slider/97003/6 "2025-05-28T03:39:34Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.