Skip to content
fandhe-frontend
GitHub

Slider

fandhe-frontend-pre-styled-uislider mod が提供するスタイル済み Slider 部品です。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

min/max/step でクランプされる連続値スライダー。塗りつぶし・つまみの位置は --fandhe-slider-percent の 1 点で伝搬します。

Volume
At max
Disabled

Features

  • `size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `Slider` 状態機械へ委譲する。
  • `range` パーツが `--fandhe-slider-percent` を含む `style` を動的値の唯一の出力点として持つ。

Anatomy

root
  label
  control
    track
      range
    thumb
  hidden-input

API Reference

Arguments

NameTypeDefaultDescription
sizeSizeSize::Mdサイズ variant。
paletteColorPaletteColorPalette::AccentcolorPalette 軸。
state&Sliderheadless-ui の値状態機械。
disabledboolfalse無効化状態。
attrsVec<(&str, &str)>root パーツへ合成する追加属性。
childrenVec<Node>root 配下の子ノード(通常 range/thumb_styled を含む)。

Data Attributes

PartAttributeObserved Values
controldata-disabled
controldata-orientationhorizontal
rangedata-disabled
rangedata-orientationhorizontal
rootdata-disabled
rootdata-orientationhorizontal
thumbdata-disabled
thumbdata-orientationhorizontal
trackdata-disabled
trackdata-orientationhorizontal

CSS Variables

VariableDefault
--fandhe-slider-percent0%
--fandhe-slider-thumb-size1.1rem
--fandhe-slider-track-height0.375rem
--fandhe-slider-track-length12rem