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 events by calling the Slider::on_change_pct, and Slider::on_change_px methods on Slider and passing in a callback. Both of these callbacks are called whenever a change is effected by either clicking or by the arrow keys. These callbacks will not be called on reactive updates, only on a mouse event or by using the arrow keys.

You can also disable event handling Decorators::disabled. If you want to use this slider as a progress bar this may be useful.

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: Into<Pct>>(percent: impl Fn() -> P + 'static) -> Self

Create a new reactive slider.

This does not automatically hook up any on_update logic. You will need to manually call Slider::on_change_pct or Slider::on_change_px in order to respond to updates from the slider.

You might want to use the simpler constructor Slider::new_rw which will automatically hook up the on_update logic for updating a signal directly.

Example

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

slider::Slider::new(move || percent.get())
    .on_change_pct(move |new_percent| percent.set(new_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_rw( percent: impl SignalGet<Pct> + SignalUpdate<Pct> + Copy + 'static, ) -> Self

Create a new reactive slider.

This automatically hooks up the on_update 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>, ) -> Self

Create a new reactive, ranged slider.

This does not automatically hook up any on_update logic. You will need to manually call Slider::on_change_value in order to respond to updates from the slider.

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_change_value(move |new_value| value.set(new_value))
    .slider_style(|s| {
        s.handle_radius(0)
            .bar_radius(25.pct())
            .accent_bar_radius(25.pct())
    })
    .style(|s| s.width(200));

pub fn on_change_pct(self, onchangepct: impl Fn(Pct) + 'static) -> Self

Add an event handler to be run when the slider is moved.

Only one callback of pct can be set on this view. Calling it again will clear the previously set callback.

You can set Slider::on_change_px, Slider::on_change_value and on_change_pct callbacks at the same time and both will be called on change.

pub fn on_change_px(self, onchangepx: impl Fn(f64) + 'static) -> Self

Add an event handler to be run when the slider is moved.

Only one callback of px can be set on this view. Calling it again will clear the previously set callback.

You can set Slider::on_change_pct, Slider::on_change_value and on_change_px callbacks at the same time and both will be called on change.

pub fn on_change_value(self, onchangevalue: impl Fn(f64) + 'static) -> Self

Add an event handler to be run when the slider is moved.

This will emit the actual value of the slider according to the current range and step.

Only one callback of value can be set on this view. Calling it again will clear the previously set callback.

You can set Slider::on_change_pct, Slider::on_change_px and on_change_value callbacks at the same time and both will be called on change.

pub fn on_hover(self, onhover: impl Fn(Pct) + 'static) -> Self

Add an event handler to be run when the mouse hovers over the slider.

The callback receives the percentage value at the current hover position. Only one hover callback can be set on this view. Calling it again will clear the previously set callback.

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

Sets the custom style properties of the Slider.

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

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_before_children( &mut self, cx: &mut EventCx<'_>, event: &Event, ) -> EventPropagation

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

Use this method to style the view’s children.

fn compute_layout(&mut self, _cx: &mut ComputeLayoutCx<'_>) -> Option<Rect>

Responsible for computing the layout of the view’s children.

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

View-specific implementation. Will be called in PaintCx::paint_view. Usually you’ll call paint_view for every child view. But you might also draw text, adjust the offset, clip or draw text.

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

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

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

fn layout(&mut self, cx: &mut LayoutCx<'_>) -> NodeId

Use this method to layout the view’s children. Usually you’ll do this by calling LayoutCx::layout_node.

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

fn scroll_to( &mut self, cx: &mut WindowState, target: ViewId, rect: Option<Rect>, ) -> bool

Scrolls the view and all direct and indirect children to bring the target view to be visible. Returns true if this view contains or is the target.