Repository: napari/napari

Issue:
style range slider with QSS
currently, the custom range slider widget is styled programmatically only

it should be styled with QSS

see [this](https://wiki.qt.io/Qt_Style_Sheets_and_Custom_Painting_Example) for an example – it can be achieved with existing Qt machinery; no parsing required on our side

see #253, #293 


Discussion:

Resolving patch:
diff --git a/napari/_qt/range_slider/range_slider.py b/napari/_qt/range_slider/range_slider.py
--- a/napari/_qt/range_slider/range_slider.py
+++ b/napari/_qt/range_slider/range_slider.py
@@ -5,8 +5,6 @@
 from qtpy import QtCore, QtGui
 from qtpy.QtWidgets import QWidget
 
-from ...util.misc import str_to_rgb
-
 class QRangeSlider(QWidget):
     """
     QRangeSlider class, super class for QVRangeSlider and QHRangeSlider.
@@ -41,7 +39,12 @@ def __init__(self, slider_range, values, parent=None):
         self.start_pos = None
         self.display_min = None
         self.display_max = None
-        self.setColors('rgb(100,100,100)', 'rgb(200,200,200)')
+
+        self.setBarColor(QtGui.QColor(200, 200, 200))
+        self.setBackgroundColor(QtGui.QColor(100, 100, 100))
+        self.setHandleColor(QtGui.QColor(200, 200, 200))
+        self.setHandleBorderColor(QtGui.QColor(200, 200, 200))
+
         self.setEnabled(True)
 
         if slider_range:
@@ -258,15 +261,45 @@ def updateScaleValues(self):
         self.updateDisplayValues()
         self.update()
 
-    def setColors(self, background, foreground):
-        self.bar_color = QtGui.QColor(
-            *str_to_rgb(foreground))
-        self.background_color = QtGui.QColor(
-            *str_to_rgb(background))
-        self.handle_color = QtGui.QColor(
-            *str_to_rgb(foreground))
-        self.handle_border_color = QtGui.QColor(
-            *str_to_rgb(foreground))
+    def getBarColor(self):
+        return self.bar_color
+
+    def setBarColor(self, barColor):
+        self.bar_color = barColor
+
+    barColor = QtCore.Property(QtGui.QColor, getBarColor, setBarColor)
+
+    def getBackgroundColor(self):
+        return self.background_color
+
+    def setBackgroundColor(self, backgroundColor):
+        self.background_color = backgroundColor
+
+    backgroundColor = QtCore.Property(
+        QtGui.QColor,
+        getBackgroundColor,
+        setBackgroundColor
+    )
+
+    def getHandleColor(self):
+        return self.handle_color
+
+    def setHandleColor(self, handleColor):
+        self.handle_color = handleColor
+
+    handleColor = QtCore.Property(QtGui.QColor, getHandleColor, setHandleColor)
+
+    def getHandleBorderColor(self):
+        return self.handle_border_color
+
+    def setHandleBorderColor(self, handleBorderColor):
+        self.handle_border_color = handleBorderColor
+
+    handleBorderColor = QtCore.Property(
+        QtGui.QColor,
+        getHandleBorderColor,
+        setHandleBorderColor
+    )
 
     def setEnabled(self, bool):
         if bool:
diff --git a/napari/components/_viewer/view/main.py b/napari/components/_viewer/view/main.py
--- a/napari/components/_viewer/view/main.py
+++ b/napari/components/_viewer/view/main.py
@@ -92,9 +92,6 @@ def __init__(self, viewer):
             lambda event: self._update_palette(event.palette)
         )
         self.viewer.layers.events.reordered.connect(self._update_canvas)
-        self.viewer.layers.events.added.connect(
-            lambda e: self._update_palette(viewer.palette)
-        )  # TODO: remove this hack when range slider uses stylesheet
 
     def screenshot(self, region=None, size=None, bgcolor=None):
         """Render the scene to an offscreen buffer and return the image array.
@@ -152,18 +149,6 @@ def _update_palette(self, palette):
         themed_stylesheet = template(self.raw_stylesheet, **palette)
         self.setStyleSheet(themed_stylesheet)
 
-        # set styles on clim slider
-        for layer in self.viewer.layers:
-            if has_clims(layer):
-                layer._qt_controls.climSlider.setColors(
-                    palette['foreground'],
-                    palette['highlight']
-                )
-
-        # set styles on dims sliders
-        for slider in self.dims.sliders:
-            slider.setColors(palette['foreground'], palette['highlight'])
-
     def on_mouse_move(self, event):
         """Called whenever mouse moves over canvas.
         """


Test patch: