フォーム v1.0.0

スライダー

ドラッグ可能なハンドルによる数値選択。単一値と範囲（2つのハンドル）モード、 ステップマーク、ライブ値表示に対応しています。スタンドアロンまたは Railsフォーム内でhidden入力を使用して送信できます。

プレビュー & コード

オプション

名前 型 デフォルト 説明
mode Symbol :single Slider mode: :single for one handle, :range for two handles
min Integer/Float 0 Minimum value
max Integer/Float 100 Maximum value
step Integer/Float 1 Step increment between values
value Integer/Float 50 Current value (single mode)
value_min Integer/Float nil Lower bound value (range mode, defaults to min + 25% of range)
value_max Integer/Float nil Upper bound value (range mode, defaults to max - 25% of range)
label String nil Label text displayed above the slider
hint String nil Hint text displayed below the slider
show_value Boolean false Show a live value tooltip above the thumb(s)
marks Boolean/Array false true for auto step marks, or Array of {value:, label:} hashes
disabled Boolean false Disable interaction
name String nil Hidden input name for form submission (single mode)
name_min String nil Hidden input name for range min value
name_max String nil Hidden input name for range max value

変更履歴 v1.0.0

- Initial release with single and range modes
- Step marks support with auto-generation or custom label arrays
- Live value tooltip display above thumb(s)
- Keyboard navigation (Arrow keys, Home, End)
- Touch support for mobile devices
- Hidden inputs for Rails form submission
- Dark mode support with slate palette

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得