スライダー

i32 のシグナルを設定するスライダーです。単位を表す値のテキストも付けられます。

実行結果

slider.rs

use hypersig::html::div;
use hypersig::style::Style;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::Slider;
use serde::{Deserialize, Serialize};

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

pub fn page() -> Page<Player> {
    let volume = Player::volume();
    Page::new(
        "プレーヤー",
        Player { volume: 40 },
    )
    .child(
        div().css(Style::new().max_width(rem(20))).child(
            Slider::new(
                "音量",
                volume,
            )
            .step(5)
            .value_text(volume.to_text().concat(" %")),
        ),
    )
}

アクセシビリティ

スライダーはネイティブの <input type="range"> なので、role="slider"、キー操作、ポインタや指でのドラッグはブラウザが用意します。入力欄は透明で、値から描いたトラックとつまみの上に重なっているので、スライダーはどのブラウザでも同じ見た目になります。

value_text は「40 %」のような値をラベルの横に表示し、支援技術には aria-valuetext として渡します。両端の近くでは、描いたつまみがブラウザ自身の透明なつまみから数ピクセルずれることがあります。

キー	動作
矢印キー	値を 1 ステップ動かします。
Page Up、Page Down	値を大きめのステップで動かします。
Home、End	最小値か最大値に移ります。

API

項目	概要
`Slider::new`	`value` に束縛し、`label` をラベルに持つ、0 から 100 まで 1 刻みのスライダー
`range`	最小値と最大値を設定します。
`step`	矢印キーを 1 回押したときに値が動く幅を設定します。
`value_text`	ラベルの横に `text` を表示し、支援技術には `aria-valuetext` として渡します。
`disabled`	`when` が true の間、スライダーを無効にして薄く表示します。