Autor Thema: [gelöst] slider mit css anpassen  (Gelesen 1538 mal)

Offline ujaudio

  • Sr. Member
  • ****
  • Beiträge: 830
[gelöst] slider mit css anpassen
« am: 13 Januar 2018, 20:24:46 »
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.
« Letzte Änderung: 14 Januar 2018, 11:57:09 von ujaudio »
Einen lieben Gruß
Jürgen

Offline MiKn

  • New Member
  • *
  • Beiträge: 30
Antw:slider mit css anpassen
« Antwort #1 am: 14 Januar 2018, 00:47:54 »
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; }

« Letzte Änderung: 14 Januar 2018, 23:18:45 von MiKn »

Offline ujaudio

  • Sr. Member
  • ****
  • Beiträge: 830
Antw:slider mit css anpassen
« Antwort #2 am: 14 Januar 2018, 11:56:53 »
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!
« Letzte Änderung: 14 Januar 2018, 11:59:21 von ujaudio »
Einen lieben Gruß
Jürgen