Hauptmenü

[gelöst] slider mit css anpassen

Begonnen von ujaudio, 13 Januar 2018, 20:24:46

Vorheriges Thema - Nächstes Thema

ujaudio

Ich möchte gerne den Slider bedienerfreundlich groß. Mittels der css Datei kann ich auch die Breite und Höhe anpassen. Aber leider den "Knopf" nicht, resp. ich habe nicht gefunden wo und wie. Im Anhang seht ihr was ich meine. Das gilt auch, wenn man sie kleiner macht: die "Knöpfe" bleiben unveränderlich. Wer weiß Abhilfe?

Weiterhin fehlt die Hue-Anzeige, die imStandard-Web-Frontend korrekt angezeigt wird. Wie kann man das korrigieren? Da habe ich auch noch nichts gefunden.
Einen lieben Gruß
Jürgen

MiKn

#1
schau mal ob dir das hilft. Ich habe in meiner css dies für die Slider:
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.slider { margin-left:10px; float:left; width:450px; height:80px;
          border-style:solid; border-width:3px; border-color:#FFFFFF }

.handle { position:relative; cursor:pointer; width:80px;
          height:74px; line-height:80px;
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:4px solid; color:white; text-align:center; }
.downText,.makeSelect select { margin:0.7em; }



ujaudio

#2
Danke, es geht in die richtige Richtung, aber funktioniert noch nicht. Auf die Schnelle hat mir auch google noch nicht weiter geholfen, muss wohl noch tiefer einsteigen :-)

Aktuell sieht es mit der folgenden Definition dann wie im Bild aus. Ich habe nun einen Handle in der richtigen Farbe und Höhe - aber in der falschen Breite: der Handle ist so breit wie der Slider und lässt nur die beiden Eckwerte (z.B. im unteren Slider 0 und 100) zu.

/* detail-selector & slider */

select       { margin-left:5px; margin-right:5px; }
.set,.attr   { margin-bottom:10px; float:left; }
.slider      { float:left; width:250px; height:60px; border:1px solid; color:#404040; }
.set .slider { background:#cccccc; border-radius:15px; }
.colorpicker_hue .slider { background: url(../jscolor/hue_background.svg); }

/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.slider { margin-left:10px; float:left; width:250px; height:60px;
          border-style:solid; border-width:1px; border-color:#404040 }

.handle { position:relative; cursor:pointer; w\[b]idth:20px;
          height:56px; line-height:60px;\[/b]
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:2px solid; color:#cccccc; text-align:center; }
.downText,.makeSelect select { margin:0.7em; }


Insbesondere konnte ich keine Erläuterung zu "w<Eckige Klammer auf, b, eckige Klammer zu>idth:20px"....

JETZT FÄLLT DER GROSCHEN: das gehört da nicht hin (nicht das <Eckige Klammer auf, Schrägstrich, b, eckige Klammer zu>)  - gelöscht und alles funktioniert SUPER.

Vielen Dank und einen schönen Sonntag!
Einen lieben Gruß
Jürgen