Anvil-extras slider styling

Anvil Q&A
1

I have a question about Anvil-extra slider with 2 handles:
Is it possible to have 3 colours?

2

Sure it’s possible.
But you’ll need to go into css to do it.
There’s a role property available on the slider.

You can add a role in the designer like multi-color and then

Something like this will get you started (add it to theme.css):

.anvil-role-multi-color .noUi-connect:first-child {
  background: lawngreen;
}
.anvil-role-multi-color .noUi-connect:nth-child(2) {
  background: blue;
}
.anvil-role-multi-color .noUi-connect:nth-child(3) {
  background: red;
}

.anvil-role-multi-color .noUi-handle[data-handle="0"] {
  background: green;
}
.anvil-role-multi-color .noUi-handle[data-handle="1"] {
  background: red;
}

Note - it’s usually best to ask anvil-extras specific questions at the anvil-extras github discussion page

5 Likes
3

Thank you very much again, this was exactly what I was asking for. What a service !!!