Struct Slider 

pub struct Slider { /* private fields */ }

A reactive slider.

You can set the slider to a percent value between 0 and 100.

The slider is composed of four parts: the main view, the background bar, an accent bar, and a handle. The background bar is separate from the main view because it is shortened when EdgeAlign is set to false.

Responding to events: You can respond to slider changes by listening to SliderChanged events:

slider::Slider::new(|| 40.pct())
    .on_event(SliderChanged::listener(), |cx, state| {
        println!("Value: {}", state.value);
        println!("Percent: {:?}", state.pct);
        println!("Pixels: {}", state.px);
        EventPropagation::Continue
    });

You can also listen to SliderHover events to respond when the user hovers over the slider:

slider::Slider::new(|| 40.pct())
    .on_event(SliderHover::listener(), |cx, state| {
        println!("Hovering at: {:?}", state.pct);
        EventPropagation::Continue
    });

These events are only fired on user interaction (mouse events or arrow keys), not on reactive updates.

You can also disable event handling with Decorators::disabled. This is useful if you want to use the slider as a progress bar.

Styling: You can use the Slider::slider_style method to get access to a SliderCustomStyle which has convenient functions with documentation for styling all of the properties of the slider.

Styling Example:

slider::Slider::new(|| 40.pct())
    .slider_style(|s| {
        s.edge_align(true)
            .handle_radius(50.pct())
            .bar_color(palette::css::BLACK)
            .bar_radius(100.pct())
            .accent_bar_color(palette::css::GREEN)
            .accent_bar_radius(100.pct())
            .accent_bar_height(100.pct())
    });

Implementations

impl Slider

pub fn new<P>(percent: impl Fn() -> P + 'static) -> Slider

where P: Into<Pct>,

Create a new reactive slider.

Listen to slider changes using the SliderChanged event:

Example

let percent = RwSignal::new(40.pct());

slider::Slider::new(move || percent.get())
    .on_event(SliderChanged::listener(), move |cx, event| {
        percent.set(event.pct);
        EventPropagation::Continue
    })
    .slider_style(|s| {
        s.handle_radius(0)
            .bar_radius(25.pct())
            .accent_bar_radius(25.pct())
    })
    .style(|s| s.width(200));

pub fn new_rw( percent: impl SignalGet<Pct> + SignalUpdate<Pct> + Copy + 'static, ) -> Slider

Create a new reactive slider.

This automatically hooks up the event logic and keeps the signal up to date.

If you need more control over the getting and setting of the value you will want to use Slider::new which gives you more control but does not automatically keep a signal up to date.

Example

let percent = RwSignal::new(40.pct());

slider::Slider::new_rw(percent)
    .slider_style(|s| {
        s.handle_radius(0)
            .bar_radius(25.pct())
            .accent_bar_radius(25.pct())
    })
    .style(|s| s.width(200));

pub fn new_ranged( value: impl Fn() -> f64 + 'static, range: RangeInclusive<f64>, ) -> Slider

Create a new reactive, ranged slider.

Listen to value changes using the SliderChanged event and read event.state.value.

Example

let value = RwSignal::new(-25.0);
let range = -50.0..=100.0;

slider::Slider::new_ranged(move || value.get(), range)
    .step(5.0)
    .on_event(SliderChanged::listener(), move |cx, event| {
        value.set(event.value);
        EventPropagation::Continue
    })
    .slider_style(|s| {
        s.handle_radius(0)
            .bar_radius(25.pct())
            .accent_bar_radius(25.pct())
    })
    .style(|s| s.width(200));

pub fn slider_style( self, style: impl Fn(SliderCustomStyle) -> SliderCustomStyle + 'static, ) -> Slider

Sets the custom style properties of the Slider.

pub fn step(self, step: f64) -> Slider

Sets the step spacing of the Slider.

Trait Implementations

impl CustomStylable<SliderCustomStyle> for Slider

type DV = Slider

The view type that this custom stylable converts to.

fn custom_style(self, style: impl Fn(S) -> S + 'static) -> Self::DV

Applies custom styling to the view with access to specialized custom style methods.

impl View for Slider

fn id(&self) -> ViewId

fn update(&mut self, _cx: &mut UpdateCx<'_>, state: Box<dyn Any>)

Use this method to react to changes in view-related state. You will usually send state to this hook manually using the View’s Id handle

fn event(&mut self, cx: &mut EventCx<'_>) -> EventPropagation

Handles an event during the target and bubble phases of event propagation.

fn style_pass(&mut self, cx: &mut StyleCx<'_>)

Use this method to style the view’s children.

fn paint(&mut self, cx: &mut PaintCx<'_>)

View-specific implementation. Called during paint traversal for this view. Children are painted automatically by Floem. Views should only paint their own content (backgrounds, borders, custom drawing).

fn view_style(&self) -> Option<Style>

fn view_class(&self) -> Option<StyleClassRef>

fn debug_name(&self) -> Cow<'static, str>

fn event_capture(&mut self, _cx: &mut EventCx<'_>) -> EventPropagation

Handles an event during the capture phase of event propagation.

fn post_paint(&mut self, cx: &mut PaintCx<'_>)