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

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
Adobe Summit 2023 | Complete list of AEM Sessions & Labs

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.

2 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.