FTUI, widgets slider und multibutton, Ändern von Eigenschaften

[FHEm2005]

Ich möchte dem Slider ein leicht anderes Aussehen "verpassen". Dazu habe ich im Firefox-Inspector die Eigenschaften verändert. Das Ergenis ist im angehängten Bild zu sehen. Da aber der Slider dynamisch aufgebaut wird, nutzt eine style-Angabe nichts, sie wird offensichtlich vom dynamischen Inhalt überschrieben.

Die Eigenschaften des "neuen"sliders"

Code Auswählen Erweitern

.range-bar {
    background-color: rgb(0, 0, 0);
    display: block;
    height: 4px;
    width: 100%;
    position: relative;
    border-radius: 15px;
    border: 1px solid #4B4A4A;
}
.range-handle {
    background-color: rgb(119, 118, 118);
    width: 20px;
    top: -2px;
    position: absolute;
    height: 7px;
    border-radius: 5px;
    box-shadow: -2px 0px 1px rgb(0, 0, 0);
    left: 20px;
}
.range-quantity {
    background-color: rgb(149, 167, 164);
    border-radius: 15px;
    display: block;
    height: 100%;
   
}

Wie kann ich die Eigenschaften der Klassen "range-bar", "range-handle" und "range-quantity" für einen dedizierten Slider ändern?

Beim select-widget gibt es innerhalb von <select></select> Eigenschaften, die ich gerne verändern möchte. So möchte ich z.B. die Umrahmung entfernen und die Schriftgröße verändern. Aber wie? data-border:none und data-text:15px bold gibt es (leider) nicht.

Wer hat einen Tipp?

Grüße Eberhard

PS: Thema wurde aus einem älteren Thread mangels Reaktionen herausgelöst.

[viegener]

Da der slider ja kein einfaches HTML-ELement ist, dessen CSS-Eigenschaften man ändern kann, sondern ein relativ komplexes widget aus verschiedenen Javascripts können Dir vermutlich nur wenige Leute weiterhelfen.

Du müsstest vermutlich die originalen powerange-Quellen herunterladen und dort herumspielen, es sind wohl relativ viele css-Eigenschaften dynamisch im javascript code berücksichtigt, aber wie die Eigenschaften ineinander greifen kann schnell zu einem NICHT funktionierenden widget führen...

[FHEm2005]

Hallo viegener,

ich gebe Dir absolut Recht dass der Slider ein komplexes Gebilde ist. Die Eigenschaften sind alle in der powerange.min.css zusammengefasst. Es sind "nur" 16 verschiedene Klassen. Dabei sind auch die von mir temporär geänderten Klassen range-bar, range-handle und range-quantity.

Was temporär geht, sollte auch dauerhaft möglich sein, oder bin ich da total daneben? Ziel ist ein Slider zu bauen, der auf einer Squeezbox-Touch zu finden ist. Er würde dann wie auf dem Bild aussehen. In einer temporären Variante funktionierte er schon.

Ähnlich ist es mir dem Select-Widget. Er soll im Kopf die Stationsauswahl der Radiostationen vornehmen, da kann ich keinen Rahmen gebrauchen.

Gruß
Eberhard

[viegener]

Meine Einschätzung bezog sich auf das komplexe Gebilde aus css UND javascript. Hast Du denn mal das powerange-css verändert und was passiert dann?

Wenn Du einen einzelnen Slider verändern willst, müsstest Du entweder eine komplette Kopie vom slider-widget anlegen (mit den abhängigen Dateien von powerange), die Verweise auf die neuen namen ändern und dieses neue Widget verwenden.

Alternativ im powerange javascript ein anderes css laden, dass über eine klasse einstellbar ist.

Ich kann nicht sagen, ob die Eigenschaften auch anders zu überschreiben sind. powerange verwendet eigentlich ordentliche Referenzen auf das eigene widget, aber wie gesagt ich habe nicht den kompletten Code angeschaut.

[setstate]

Wenn bestimmte CSS Eigenschaften wichtig sind und vor allen anderen gelten sollen, setzt man ein !important nach.

Code Auswählen Erweitern


.range-bar {
    background-color: rgb(0, 0, 0) !important;
    display: block !important;
    height: 4px !important;
    width: 100% !important;
    position: relative !important;
    border-radius: 15px !important;
    border: 1px solid #4B4A4A !important;
}
.range-handle {
    background-color: rgb(119, 118, 118) !important;
    width: 20px !important;
    top: -2px !important;
    position: absolute !important;
    height: 7px !important;
    border-radius: 5px !important;
    box-shadow: -2px 0px 1px rgb(0, 0, 0) !important;
    left: 20px !important;
}
.range-quantity {
    background-color: rgb(149, 167, 164) !important;
    border-radius: 15px !important;
    display: block !important;
    height: 100% !important;
}


Aber Achtung! Der Style auf deinem Bild ist nicht mehr zeitgemäß . Setzt nicht soooo viel Energie darein, um das nachzubilden. z.B. die 3D Farbverläufe waren vor 10 Jahren mal ganz populär, nutzt man aber in aktuellen UI nicht mehr

[FHEm2005]

@viegener
Ich habe jetzt mal die CSS-Datei so umgeschrieben, wie ich es wollte. Der Slider sieht jetzt so aus wie ich es möchte und die Funktionen sind einwandfrei.

@setstate
das mit dem !important versuch ich Morgen mal. Dann gibt es ein Feedback.
Der Style mag wohl nicht mehr zeitgemäß sein, ich bin ja auch nicht mehr neu.    Mir gefällt es. Die blauen Farben sind aus dem Bildschirm von AVATAR entnommen, der hat mir halt gefallen. Die betätigten Knöpfe leuchten gelb/orange das kann ich gut erkennen. Anbei ein Ausschnitt. Die 3D Oberfläche im vorherigen Bild entspricht fast 1:1 der Squeezebox Touch. Darüber werden meine Squeezboxen gesteuert.

Gruß Eberhard

edit. ein Zusatz

[FHEm2005]

Mein versprochenes Feedback:

Das mit dem !important funktioiert! Jetzt habe ich eine Version, die zwar ohne Eingreifen in die ursprüngliche Programmierung auskommt, aber für eine HTML-Seite gilt. Damit komme ich hin.

@setstate & @viegener
Vielen Dank für eure Mühen und Hilfen.

Einen schönen Tag.
Gruß Eberhard

[dieda]

Hallo viegener,

ich gebe Dir absolut Recht dass der Slider ein komplexes Gebilde ist. Die Eigenschaften sind alle in der powerange.min.css zusammengefasst. Es sind "nur" 16 verschiedene Klassen. Dabei sind auch die von mir temporär geänderten Klassen range-bar, range-handle und range-quantity.

Was temporär geht, sollte auch dauerhaft möglich sein, oder bin ich da total daneben? Ziel ist ein Slider zu bauen, der auf einer Squeezbox-Touch zu finden ist. Er würde dann wie auf dem Bild aussehen. In einer temporären Variante funktionierte er schon.

Ähnlich ist es mir dem Select-Widget. Er soll im Kopf die Stationsauswahl der Radiostationen vornehmen, da kann ich keinen Rahmen gebrauchen.

Gruß
Eberhard

Magst du den Code für dein Squeezebox-Modul posten? Ich habe einige Clients ( im Einsatz und suche nach der Lösung...