Kivy Overlaying Sliders - kivy

Question

I'm wondering if anyone has coded up a kivy slider variant with two drag-bars to indicate an interval ala:
Qualtrics: Slider bar with two sliders knobs to indicate intervals
I'm thinking a possible implementation would be two sliders in a floatlayout (set on top of eachother), then only allowing selection of the slider if the actual button/drag-knob on the slider is selected, and then preventing crossover of the slide button (plus a little deadspace to avoid ) by preventing the knobs from colliding.
Implementation something like:
FloatLayout:
Slider:
pos:self.x, self.y
id:slider_1
on_value:print("SLIDER1 CHANGED")
Slider:
pos:self.x, self.y
id:slider_2
on_value:print("SLIDER2 CHANGED")
However on initial testing I am unable to select the underlying slider as any click on the area where they are both layed out only moves the knob of the top slider to the location that was clicked.
So questions:
How do allow kivy to only change the value of a slider if it is directly clicked on the drag-knob (and not anywhere on the widget)?
How do you enable kivy to check for collisions on all widgets (as opposed to just colliding the topmost layer?
Thanks.
edit:
Thanks to #John_Anderson 's answers I worked it out. Attached is the resultant code:
<PairedSliders>
FloatLayout:
CustomSlider:
id:slider_lower
pos:self.x,self.y
sensitivity:'handle'
value:20
CustomSlider:
id:slider_upper
pos:self.x,self.y
sensitivity:'handle'
value:30
<KivyDragger>:
BoxLayout:
PairedSliders:
And the app that will run it:
from kivy.app import App
from kivy.clock import Clock
from kivy.logger import Logger, LOG_LEVELS
from kivy.uix.slider import Slider
from kivy.uix.floatlayout import FloatLayout
class PairedSliders(FloatLayout):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.limit_deadband = 5
#Schedule initialization for limits set in .kv file.
Clock.schedule_once(lambda x:self.initialize())
def initialize(self):
#Allow .kv language to set value, and bandwidth limits.
upper_slider = self.ids['slider_upper']
lower_slider = self.ids['slider_lower']
#Double check that the initializations make sense.
if upper_slider.value < lower_slider.value+self.limit_deadband:
raise Exception(f'Use KV Language to set upper/lower value pairs past limit deadband. '+
f'Lower:{lower_slider.value}, Upper:{upper_slider.value}, Deadband:{self.limit_deadband}')
upper_slider.name = 'Upper'
upper_slider.deadband = self.limit_deadband
upper_slider.set_limits(lower_slider.value, upper_slider.max)
lower_slider.name = 'Lower'
lower_slider.deadband = self.limit_deadband
lower_slider.set_limits(lower_slider.min, upper_slider.value)
def on_touch_up(self, touch):
#See where we moved. Set limits on the opposing slider.
upper_slider = self.ids['slider_upper']
lower_slider = self.ids['slider_lower']
#Set the upper limit for the lower slider to the current value.
if upper_slider.marked:
upper_slider.marked = False
Logger.debug('Upper grabbed')
lower_slider.set_limits(lower_slider.min, upper_slider.value)
#Set the lower limit for the upper slider to the current value.
if lower_slider.marked:
lower_slider.marked = False
Logger.debug('lower grabbed')
upper_slider.set_limits(lower_slider.value, upper_slider.max)
class CustomSlider(Slider):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.limits = (self.min, self.max)
self.deadband=5
self.name = ''
self.grabbed = False
self.marked = False
def set_limits(self, lower, upper):
Logger.debug(f'{self.name} limit set:{lower}, {upper}')
self.limits = (lower, upper)
def on_touch_move(self, touch):
#If we're oob on limits, pin by ungrabbing.
if self.disabled or not self.collide_point(*touch.pos):
return
#Due to both sliders occupying the same space, we avoid movement if we're not flagged.
if not self.grabbed:
return
#Check to make sure our deadband doesn't lock out the max/min limits on the edges.
#Also do deadband/2 so you don't "lock up" by always being at the limit.
if self.limits[0] == self.min:
min_limit = self.min
else:
min_limit = self.limits[0]+self.deadband/2
if self.limits[1] == self.max:
max_limit = self.max
else:
max_limit = self.limits[1] - self.deadband/2
#Check for limits. Stop the motion by ungrabbing if we trigger.
if self.value < min_limit:
#Place in the deadband limit.
Logger.debug(f'{self.name} VAL:{self.value} OOB. MIN:{self.value} < {min_limit}')
self.value = self.limits[0]+self.deadband
touch.ungrab(self)
elif self.value > max_limit:
Logger.debug(f'{self.name} VAL:{self.value} OOB. MAX:{self.value} > {min_limit}')
#Place in the deadband limit.
self.value = self.limits[1]-self.deadband
touch.ungrab(self)
else:
return super().on_touch_move(touch)
def on_touch_down(self, touch):
if self.disabled or not self.collide_point(*touch.pos):
return
if touch.is_mouse_scrolling:
if 'down' in touch.button or 'left' in touch.button:
if self.step:
self.value = min(self.max, self.value + self.step)
else:
self.value = min(self.max,
self.value + (self.max - self.min)/20)
if 'up' in touch.button or 'right' in touch.button:
if self.step:
self.value = max(self.min, self.value - self.step)
else:
self.value = max(self.min,
self.value - (self.max - self.min)/20)
elif self.sensitivity == 'handle':
if self.children[0].collide_point(*touch.pos):
touch.grab(self)
self.grabbed = True
self.marked = True
else:
#Avoid touching the object if we haven't grabbed the handle itself.
return False
else:
touch.grab(self)
self.value_pos = touch.pos
return True
def on_touch_up(self, touch):
self.grabbed = False
return super().on_touch_up(touch)
class KivyDragger(FloatLayout):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
class KivyDraggerApp(App):
def build(self):
return KivyDragger()
if __name__ == '__main__':
KivyDraggerApp().run()
Note that I still haven't figured out a way to access sub-members of class instantiations (ala the sliders ids) without first initializing everything, then scheduling an additional "initialize" function with the Clock.schedule_once() function, but it works aok for my purposes.

Answer 1

You can extend Slider to do what you want by a small adjustment to its on_touch_down() method:
class MySlider(Slider):
def on_touch_down(self, touch):
if self.disabled or not self.collide_point(*touch.pos):
return
if touch.is_mouse_scrolling:
if 'down' in touch.button or 'left' in touch.button:
if self.step:
self.value = min(self.max, self.value + self.step)
else:
self.value = min(
self.max,
self.value + (self.max - self.min) / 20)
if 'up' in touch.button or 'right' in touch.button:
if self.step:
self.value = max(self.min, self.value - self.step)
else:
self.value = max(
self.min,
self.value - (self.max - self.min) / 20)
elif self.sensitivity == 'handle':
if self.children[0].collide_point(*touch.pos):
touch.grab(self)
else:
# this is the modification
return False
else:
touch.grab(self)
self.value_pos = touch.pos
return True
And when you use it, add the sensitivity: 'handle' attribute, like this:
FloatLayout:
MySlider:
id:slider_1
value: 25
sensitivity: 'handle'
on_value:print("SLIDER1 CHANGED")
MySlider:
id:slider_2
value: 75
sensitivity: 'handle'
on_value:print("SLIDER2 CHANGED")
The sensitivity: 'handle' means that you can only adjust the Slider by clicking and dragging the handle.