Multiple Sliders Controlling Background Color in Kivy

In this example, three independent sliders are used to control background color and they are in order of red, green and blue. All the values are written at the buttom of the application window in the precision of 0.001. You can change the precision in .kv file if you want. The color is sent by Kivy’s automatic property binding mechanism to Canvas Color and Label.

Source code

Python file

#-*-coding:utf-8-*-
'''
Created on 31 Haz 2015

@author: guray
'''

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout 

class RootWidget(BoxLayout):
    pass

class SliderExampleApp(App):
    def build(self):
        return RootWidget()
    
if __name__ == '__main__':
    SliderExampleApp().run()

Kivy file (sliderexample.kv)

<RootWidget>:
    orientation: "vertical"
    slider_colors: 0.5, 0.5, 0.5
    canvas.before:
        Color:
            rgb: root.slider_colors
        Rectangle:
            pos: root.pos
            size: root.size
    Slider:
        min: 0
        max: 1
        value: 0.5
        on_value: root.slider_colors[0] = self.value;
    Slider:
        min: 0
        max: 1
        value: 0.5
        on_value: root.slider_colors[1] = self.value
    Slider:
        min: 0
        max: 1
        value: 0.5
        on_value: root.slider_colors[2] = self.value
    Label:
        id: color_label
        font_size: "50sp"
        text: "Color:" + ",".join(["%.3f" %(i) for i in root.slider_colors])

Here, Kivy’s ListProperty is utilized. Also there is no change in comparison of the previous example stated in here. As always, all improvements and suggestions are welcomed.

Todo: You can make a HEX code generator using these by changing ranges of sliders and modifying the Label a little bit.