How to set the width of Slider

[yk0n9]

How to set the width of a single Slider?

It is too short by default

[YgorSouza]

ui.style_mut().spacing.slider_width = desired_width;

[yk0n9]

thank you for your reply
Is it a global setting?
Can I set it individually for each one?

[YgorSouza]

Once you change it, it will affect every slider drawn until you change it again. So you can put this line before each slider if you want different sizes, or you can make a type wrapping the slider to add this setting and any others you need, like this:

https://github.com/a-liashenko/TinyPomodoro/blob/06d08df77ef10846910593586dbb44fa7554495c/app/src/app/widgets/styled_slider.rs

Issue #3284 is meant to make this kind of customization simpler so in the future you won't have to do all that, but for now this is the way to do it.

[Tuupertunut]

If you want to adjust the width without setting a global slider width, you can use scoped UI. This way the style change is only limited to the scope.

ui.scope(|ui| {
    ui.spacing_mut().slider_width = desired_width;
    ui.add(Slider::new(&mut value, 0..=100));
});

If you want to make the slider span the whole width of the container, you can use ui.available_width(). Note that this makes the slider itself take all horizontal space and hides the DragValue field that normally comes after the slider.

ui.scope(|ui| {
    ui.spacing_mut().slider_width = ui.available_width();
    ui.add(Slider::new(&mut value, 0..=100));
});

If you also want the DragValue field to be visible, you can subtract the default size of the DragValue and the padding that comes after it from the slider width.

ui.scope(|ui| {
    ui.spacing_mut().slider_width = ui.available_width()
        - ui.spacing().interact_size.x
        - ui.spacing().button_padding.x;
    ui.add(Slider::new(&mut value, 0..=100));
});