atproto blogging
1use dioxus::prelude::*;
2use dioxus_primitives::slider::{
3 self, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps,
4};
5
6#[component]
7pub fn Slider(props: SliderProps) -> Element {
8 rsx! {
9 document::Link { rel: "stylesheet", href: asset!("./style.css") }
10 slider::Slider {
11 class: "slider",
12 value: props.value,
13 default_value: props.default_value,
14 min: props.min,
15 max: props.max,
16 step: props.step,
17 disabled: props.disabled,
18 horizontal: props.horizontal,
19 inverted: props.inverted,
20 on_value_change: props.on_value_change,
21 label: props.label,
22 attributes: props.attributes,
23 {props.children}
24 }
25 }
26}
27
28#[component]
29pub fn SliderTrack(props: SliderTrackProps) -> Element {
30 rsx! {
31 slider::SliderTrack { class: "slider-track", attributes: props.attributes, {props.children} }
32 }
33}
34
35#[component]
36pub fn SliderRange(props: SliderRangeProps) -> Element {
37 rsx! {
38 slider::SliderRange { class: "slider-range", attributes: props.attributes, {props.children} }
39 }
40}
41
42#[component]
43pub fn SliderThumb(props: SliderThumbProps) -> Element {
44 rsx! {
45 slider::SliderThumb {
46 class: "slider-thumb",
47 index: props.index,
48 attributes: props.attributes,
49 {props.children}
50 }
51 }
52}