Skip to main content

orbital_base_components/form/slider/
label.rs

1use leptos::prelude::*;
2
3use super::base::SliderInjection;
4
5/// Positioned label marker for [`BaseSlider`](super::base::BaseSlider).
6#[component(transparent)]
7pub fn BaseSliderLabel(
8    #[prop(optional, into)] class: MaybeProp<String>,
9    #[prop(into)] value: Signal<f64>,
10    children: Children,
11) -> impl IntoView {
12    let slider = SliderInjection::expect_context();
13
14    let style = move || {
15        let offset = (value.get() - slider.min.get()) / (slider.max.get() - slider.min.get());
16        if slider.vertical.get() {
17            format!(
18                "bottom: calc({offset} * (100% - var(--orbital-slider__thumb--size)) + var(--orbital-slider__thumb--size) / 2)"
19            )
20        } else {
21            format!(
22                "left: calc({offset} * (100% - var(--orbital-slider__thumb--size)) + var(--orbital-slider__thumb--size) / 2)"
23            )
24        }
25    };
26
27    view! {
28        <div class=move || {
29            let mut parts = vec![
30                "orbital-slider-label".to_string(),
31                if slider.vertical.get() {
32                    "orbital-slider-label--vertical".to_string()
33                } else {
34                    "orbital-slider-label--horizontal".to_string()
35                },
36            ];
37            if let Some(extra) = class.get() {
38                if !extra.is_empty() {
39                    parts.push(extra);
40                }
41            }
42            parts.join(" ")
43        } style=style>
44            {children()}
45        </div>
46    }
47}