Change slider arrows to an image and different color than the sliding bar

Ask the Community Customization
1

Would like to have the ability to change the slider arrows to an image (my logo) as well as change the arrows themselves to a desired color, aside from the sliding bar color.

3

Hi there, @Bret :waving_hand:

Here is a CSS code to change the color of the arrow icons:

[class*="PairSliderDivider__Arrow-sc"] svg path {
  fill: red;
}

And this code will help you replace default arrow icons with your own:

/* left arrow */
[class*="PairSliderDivider__Arrow-sc"]:first-child {
  max-width: 30px;
  content: url(https://example.com/left-arrow.png);
}

/* right arrow */
[class*="PairSliderDivider__Arrow-sc"]:last-child {
  max-width: 30px;
  content: url(https://example.com/right-arrow.png);
}

Do not forget to replace example links in the code with the links to your icons :slightly_smiling_face:

4

Sweet! Thanks Max!

5

You’re always welcome!

Feel free to contact us here again if any further help is needed :wink:

6

Is there a CSS to enlarge the arrows?

7

Hi there, @Bret :waving_hand:

I’ve checked your widget and see you’ve already found a solution that works great:

[class*="PairSliderDivider__Arrow-sc"] {
transform: scale(2);
}

Could you please confirm if everything is fine now?

8

Working well. Thx!

10

Glad to hear it :tada:

Don’t hesitate to get back if anything else comes up!