Struct Slider 

pub struct Slider<S> { /* private fields */ }

A slider labeled label that sets the i32 signal value.

It is a native <input type="range">, so the browser gives it role="slider", the arrow keys, Page Up, Page Down, Home, and End, and dragging with a pointer or a finger. The input is transparent and lies over a track and a thumb drawn from the value, so the slider looks the same in every browser. The value is shown beside the label, hidden from assistive technology, which reads it from the input.

The thumb is drawn 1rem wide. The browser’s own transparent thumb, which the pointer actually drags, has the width the browser gives it, so the drawn thumb can sit a few pixels off the pointer near either end.

use hypersig::Signals;
use hypersig_ui::Slider;
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
struct Player {
    volume: i32,
}

let volume = Slider::new("Volume", Player::volume()).range(0, 100).step(5);
let html = volume.render().render();
assert!(html.contains(r#"type="range""#));
assert!(html.contains(r#"max="100""#));

Implementations

impl<S> Slider<S>

pub fn new(label: impl Into<String>, value: Sig<S, i32>) -> Self

A slider from 0 to 100 in steps of 1, labeled label, bound to value.

pub fn range(self, min: i32, max: i32) -> Self

Sets the lowest and the highest value.

Panics

Panics if min is not below max.

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

Sets how far one arrow key press moves the value.

Panics

Panics if step is not positive.

pub fn value_text(self, text: impl IntoExpr<S, String>) -> Self

Shows text beside the label and gives it to assistive technology as aria-valuetext, for a value that needs a unit, such as “40 %”.

pub fn disabled(self, when: impl IntoExpr<S, bool>) -> Self

Disables the slider while when is true, and dims it.

pub fn render(self) -> El<S>

The label, the shown value, and the slider, in a <div>.

Trait Implementations

impl<S: Debug> Debug for Slider<S>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<S> From<Slider<S>> for El<S>

fn from(slider: Slider<S>) -> Self

Converts to this type from the input type.

impl<S> From<Slider<S>> for Node<S>

fn from(slider: Slider<S>) -> Self

Converts to this type from the input type.