CODEWITHSUNDEEP
cssangularionic-frameworksassthemes
David Arias
David Arias

Reputation: 79

Discrete colors for min and max knobs for ion-range

So I'm trying to theme my ionic app so that the min and max knobs on an ion-range component have discrete colors, as it stands I can apply a single html property called "color" to the selector, but that property applies it to the space between the sliders.

<ion-range class="chartSlider" min="62" max="100" [(ngModel)]="slider"(ionChange)='goSlider()' **color="primary"** dualKnobs="true ">

when i pull up the console It looks like i can target each individual slider, they each have a seperate div classes.

".range-knob-handle" ".range-knob-handle range-knob-max"

when I change properties to either of these in the console, those properties change in real time, except for the color...

I have a feeling that this has to do with Sass variables, which ionic provides 3 variations on a single "color" variable, for ion-range.

I went ahead and changed these in the sass variables folder under "themes" to "black" as a test and sure enough they change, but the change is applied to BOTH sliders at once.

$range-ios-knob-background-color: #000; $range-md-knob-background-color: #000; $range-wp-knob-background-color: #000;

How can I have these variables attach to the knob of my choosing's respective div tag, as opposed to both at once?

Upvotes: 0

Views: 1134

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

This is more of a css selector trick question and its not really ionic specific i guess.

You could try something like this inside of the relevant scss file of your component:

.range-knob-handle > .range-knob {
    background-color: #1257c7 !important
}
.range-knob-handle ~ .range-knob-handle > .range-knob {
    background-color: #e6780b !important
}

The first block will just color all the knobs in your app. The second one uses css selector to "get to" the one knob that is going after previous knob sibling.

Try it. Most likely to avoid bugs you will need to ensure css selectors like that do not interfere with anything else (are specific to a given component)

Upvotes: 1

Related Questions