How does moving the scrollbars actually work?

[TomJGooding]

Hoping I had some better understanding of mouse 'grab and drag' functionality after generous help with my last question, I had another look at the code for the scrollbars.

Granted I'm probably in too deep given that the "scrollbar-related widgets [are] for internal use" only, but I am really curious how moving the scrollbars actually works!

I've looked at the code for various widgets that use ScrollBarRender, but there must be something I am missing as I can't see where the moving of the "thumb" of the scrollbar is implemented.

[willmcgugan]

Happy to share how we did things! Anything in particular that needs explaining?

[TomJGooding]

Sorry Will, I edited my post for (hopefully!) some clarity before seeing you'd already replied! I don't understand where the moving of the actual "thumb" of the scrollbar is implemented in any of the widgets using ScrollBarRender.

For example looking at the actual ScrollBar: I understand how the mouse 'grab and drag' changes the value of its positions*, but I can't see where the scrollbar "thumb" is actually moved on screen?

Does that makes sense?

*Though action_grab is still a mystery as I cant find any other reference to this in Textual

[willmcgugan]

You might be missing the meta set by the Scrollbar render. This basically lets you invoke an action when you click a particular part of a renderable.

The scrollbar thumb has handlers for mouse down and mouse up. This will invoke the corresponding action, which is where action_grab comes from.

https://github.com/Textualize/textual/blob/main/src/textual/scrollbar.py#L114

[TomJGooding]

You might be missing the meta set by the Scrollbar render.

Thanks Will, yup I had definitely missed that!

I'm afraid I still don't follow what actually moves the thumb, but maybe I can blame the heatwave...!

(I'm probably wrong, but is action_released a possible typo? I see "release" in the meta set but but not "released"?)

[willmcgugan]

The mouse move events is handled in the on_mouse_move handler, which gets the mouse coordinates. That ultimately calls Widget._scroll_to which modifies scroll_x and scroll_y. Those have watch methods which adjust the position attribute of the scrollbars.

You may be right about action_released! Looks like that functionality is handled in on_mouse_up

[TomJGooding]

You may be right about action_released! Looks like that functionality is handled in on_mouse_up

I'm glad something useful came from all my questions about the scrollbar workings!

Hopefully I'm not testing your patience, but could I ask for one final bit of help on this?

I've been working on a Slider widget as a learning exercise, which utilises ScrollBarRender in a similar way to the Switch widget. The code with examples I'm afraid would be a bit too long to post here, so I hope you don't mind having a look through my textual-slider repo.

I've figured out interaction with the keyboard, but I'm afraid I am still struggling to how to add mouse interaction.

[EDIT: Sorry I forgot to mention: I realise I'll also need to validate the slider position, possibly moving it to correspond with the nearest valid value after the mouse is released. But for now I would just like to get this moving (so to speak!) I've tried copying various bits of code from the ScrollBar without success]

Thanks again for your help with this!

[TomJGooding]

Okay, I think I'm finally getting somewhere with this!

[EDIT: Sorry I found my previous code actually didn't work for all my test sliders - this might be better]

    async def _on_mouse_move(self, event: events.MouseMove) -> None:
        if self.grabbed:
            mouse_move = event.screen_x - self.grabbed.x
            new_slider_percent = self.grabbed_percent + (
                mouse_move * (100 / self.content_size.width)
            )
            max_percent = (self.max / self.number_of_steps) * 100
            self.slider_percent = clamp(new_slider_percent, 0, max_percent)

        event.stop()