Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

giving color as input to css class without using style tag

Avatar

Level 3

How can I use style="color:${properties.color @ context='styleToken'}" in pure css class as I wanted to give different colors as input at different times.

4 Replies

Avatar

Employee Advisor

Hi @SahrudayaB 

You can create different classes for each color in css file for eg :

.color-green{
    color: green;
}

.color-blue{
    color: blue;
}

and use those classes based on condition in sightly for eg :

<div class="color-${properties.color}">


Thanks.

Avatar

Level 3

but ${properties.color @ context='styleToken'} returns rgb value. In that case how can I give that value 

Avatar

Level 3

No. I just used "granite/ui/components/coral/foundation/form/colorfield" sling resource type.

Here is what I got.

SahrudayaB_0-1644316950719.png

And then I'm giving ${properties.color} in style tag. It is applying when it is used for text but I want to use it to change the colors of range slider track and thumb.

Avatar

Employee Advisor

@SahrudayaB , 

the text use the property as color

color: rgb(x, y, z);


while the slider thumb & track uses the property background-color

background-color: rgb(x, y, z);

 Please update the inline styles accordingly.

Thanks.

Avatar

Level 3

Yes, I did but it's not getting applied since I'm using  input[type='range']::-webkit-slider-runnable-track  and input[type='range']::-webkit-slider-thumb in css to range slider track and thumb. 

Avatar

Level 3

I have followed the same but I want content authors to choose colors for range slider track and thumb from dialog box. Even if I add style tag in html to apply the color, it's not applying.

The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now