# Apply stylesheet for \`ctkRangeSlider\`

**URL:** <https://discourse.slicer.org/t/apply-stylesheet-for-ctkrangeslider/20604>\
**Category:** Development\
**Created:** [November 12, 2021, 5:37pm UTC](https://discourse.slicer.org/t/apply-stylesheet-for-ctkrangeslider/20604 "2021-11-12T17:37:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![keri](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/keri/32/11618_2.png) [@keri](https://discourse.slicer.org/u/keri)\
**Post date:** [November 12, 2021, 5:37pm UTC](https://discourse.slicer.org/t/apply-stylesheet-for-ctkrangeslider/20604/1 "2021-11-12T17:37:42Z")

</div>

Hi,

Is there a way to change `ctkRangeSlider` color filled between min and max values?  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/3/d/3de6e5ba22703f1e9040653e941c7140b24653b8.png)

I look in the source code of `ctkRangeSlider` and I can’t understand what parameter controls this.  
The original [QSlider](https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qslider) seems to have no option to control this color.

Also where are Slicer dark and light themes are defined?  
I’m not much familiar with styling but I expected that Slicer use some Qt Style Sheet (probably some `.css` file) but instead I can see classes like (slicersources-src/Base/QTGUI) `qSlicerStyle`, `qSlicerDarkStyle`, `qSlicerLightStyle` inherited form `ctkProxyStyle` → `QProxyStyle`. Are these classes are fully responsible (or almost fully responsible) for Slicer GUI style?

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [November 12, 2021, 5:55pm UTC](https://discourse.slicer.org/t/apply-stylesheet-for-ctkrangeslider/20604/2 "2021-11-12T17:55:59Z")

</div>

Widgets use colors based on the ColorRole from the Palette. This provides a theme of colors used consistently across the GUI.

I believe a Qt slider’s active range uses the [QPalette::Highlight](https://doc.qt.io/qt-5/qpalette.html#ColorRole-enum) specification. You’re showing Slicer when it is using the Slicer Dark mode, so the Highlight color of the QPalette for Slicer Dark is at:

> <https://github.com/Slicer/Slicer/blob/6582c1f0b0ec5772776564e5c2704e78b82ea261/Base/QTGUI/qSlicerStyle.cxx#L270>

---

<div class="post-metadata">

**Author:** ![keri](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/keri/32/11618_2.png) [@keri](https://discourse.slicer.org/u/keri)\
**Post date:** [November 12, 2021, 8:22pm UTC](https://discourse.slicer.org/t/apply-stylesheet-for-ctkrangeslider/20604/3 "2021-11-12T20:22:17Z")

</div>

Thank you very much,

You were right!

It took some time to understand how to create custom style plugin so that it is visible in Slicer-\>Edit-\>Application Settings-\>Appearance-\>Themes but after I did that I could change the color of `ctkRangeSlicer`  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/9/3/937b8b5701b00e25501f1d8b0bf71a118345270f.png)