repho
10 May 2025 15:39
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!
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
10 May 2025 17:14
3
Hey, amazing, exactly what I needed!
Thank you so much!
Adapted to what I was aiming for:
2 Likes
Can you post up the json for this - maybe even in the projects section for everyone to learn from/copy ?
regards
Craig
repho
14 May 2025 03:39
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