Add range steps into sliders #141
Comments
|
Note: There is also no value shown. Example: A command parameter (as rendered in the gui above) does not have a state, it is just set when the command is send to the backend. Its one way. There is no way to get the "current parameter value" |
|
Add a link between params & states? E.g. Temperature. Then there needs a link between the command "set temperature" & the state temperature. |
|
Feels like this can already be done.
When there is a state with the same command alias, just display the state value inside the command parameter view as seen in the screenshots above. In combination with a additional added |
|
Icons for each setp/setting would also be very nice. |
|
Quick bootstrap & chatgpt draft: <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Range Slider mit Tooltip-ähnlichem Thumb-Label</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.range-slider-container {
position: relative;
width: 300px;
margin: 50px auto;
}
.thumb-label {
position: absolute;
top: -35px;
/* Positionierung über dem Slider */
left: 0;
transform: translateX(-50%);
background-color: #000;
/* Schwarzer Hintergrund wie Bootstrap Tooltip */
color: #fff;
padding: 4px 8px;
/* Kleinere Padding-Werte */
border-radius: 4px;
font-size: 12px;
/* Kleinere Schriftgröße */
white-space: nowrap;
text-align: center;
display: none;
/* Standardmäßig versteckt */
}
.thumb-label::after {
content: '';
position: absolute;
top: 100%;
/* Positionierung des Pfeils direkt unter dem Label */
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
/* Pfeil-Farbe wie der Hintergrund */
}
.range-slider-container input[type="range"]:hover+.thumb-label {
display: block;
/* Anzeigen, wenn über den Slider-Knopf gehovert wird */
}
.range-labels {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
bottom: -25px;
/* Labels unter dem Slider platzieren */
}
.range-labels span {
font-size: 14px;
}
input[type="range"] {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="range-slider-container">
<input type="range" class="form-control-range form-range" min="1" max="5" step="1" id="rangeSlider"
value="1">
<div class="thumb-label" id="thumbLabel">1</div>
<div class="range-labels">
<span>
<i class="fa fa-wind"></i>
</span>
<span>
<i class="fa fa-fan"></i>
</span>
<span>
<i class="fa fa-level-up-alt"></i>
</span>
<span>
<i class="fa fa-cogs"></i>
</span>
<span>
<i class="fa fa-level-down-alt"></i>
</span>
</div>
</div>
</div>
<script>
const rangeSlider = document.getElementById('rangeSlider');
const thumbLabel = document.getElementById('thumbLabel');
function updateThumbLabel() {
// Aktualisiere den Wert des Labels
thumbLabel.textContent = rangeSlider.value;
// Berechne die Position des Labels relativ zur Slider-Position
const max = rangeSlider.max;
const min = rangeSlider.min;
const value = rangeSlider.value;
const percentage = ((value - min) / (max - min)) * 100;
// Setze die Position des Labels basierend auf dem Prozentsatz
thumbLabel.style.left = `calc(${percentage}% + (${8 - percentage * 0.15}px))`;
}
// Initiales Update und Event Listener für Änderungen
updateThumbLabel();
rangeSlider.addEventListener('input', updateThumbLabel);
rangeSlider.addEventListener('mousemove', updateThumbLabel);
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html> |
Currently command parameters
type=numberare renderted as range sliders:The have no inidcaiton about the steps/range.
Add a step indicator, example:
The text was updated successfully, but these errors were encountered: