Slider-Widget mit data-handle-diameter nicht mehr zentriert

Begonnen von drhirn, 18 Februar 2019, 15:00:07

Vorheriges Thema - Nächstes Thema

drhirn

Hi,

für meine Wurstfinger brauche ich einen etwas größeren Slider. Sobald ich aber einen Wert für data-handle-diameter angebe, lässt sich das ganze Widget nicht mehr vertikal zentrieren. Bzw. ist ein vertikaler Slider dann überhaupt verschoben. Beispiel im Anhang.
Bin ich der einzige mit dem Problem?

Hier der Code zum Bild:

<div style="display: flex; flex-flow: row wrap; padding: 1em; align-items: center; background: gray;">
<div style="flex: 0 0 auto; align-self: left; text-align: left;">WoZi01WW</div>
<div data-type="slider"
data-device="HUEDevice2"
data-get="pct"
data-min="0"
data-max="100"
data-handle-diameter="40"
class="horizontal tap"
style="flex: 0 0 auto; align-self: left;"></div>
<div data-type="symbol"
data-get="pct"
data-device="HUEDevice2"
data-get-on="!off"
data-get-off="0"
style="flex: 0 0 auto; text-align: right;"></div>
</div>
<div style="background: gray;">
<div>WoZi01WW</div>
<div data-type="slider"
data-device="HUEDevice2"
data-get="pct"
data-min="0"
data-max="100"
data-handle-diameter="40"
class="vertical tap"></div>
<div data-type="symbol"
data-get="pct"
data-device="HUEDevice2"
data-get-on="!off"
data-get-off="0"></div>
</div>
<div style="display: flex; flex-flow: row wrap; padding: 1em; align-items: center; background: gray;">
<div style="flex: 0 0 auto; align-self: left; text-align: left;">WoZi01WW</div>
<div data-type="slider"
data-device="HUEDevice2"
data-get="pct"
data-min="0"
data-max="100"
class="horizontal tap"
style="flex: 0 0 auto; align-self: left;"></div>
<div data-type="symbol"
data-get="pct"
data-device="HUEDevice2"
data-get-on="!off"
data-get-off="0"
style="flex: 0 0 auto; text-align: right;"></div>
</div>


Lässt sich da etwas machen?

Danke!
Stefan

setstate

Position für den vertikalen Slider ist jetzt korrigiert. Update ist hochgeladen.

Kleiner Tipp noch:

Man kann auch nur  data-touch-diameter angeben, dann ändert sich die Handle-Größe nur beim Touch/Klick.

Die Mittellage für den horizontalen Slider ist aber noch abhängig von der Handle-Größe. Das muss ich auch noch optimieren.

drhirn

Bis data-touch-diameter greift, habe ich schon daneben gegriffen ;D

Der vertikale Slider tut, auf den horizontalen kann ich warten.

Danke dir!