Skip to main content

impulse_thaw/slider/
slider_label.rs

1use crate::SliderInjection;
2use leptos::prelude::*;
3use thaw_utils::{class_list, mount_style};
4
5#[component]
6pub fn SliderLabel(
7    #[prop(optional, into)] class: MaybeProp<String>,
8    /// Value at which label will be placed.
9    #[prop(into)]
10    value: Signal<f64>,
11    children: Children,
12) -> impl IntoView {
13    mount_style("slider-label", include_str!("./slider_label.css"));
14
15    let slider = SliderInjection::expect_context();
16
17    let style = move || {
18        let value = (value.get() - slider.min.get()) / (slider.max.get() - slider.min.get());
19
20        if slider.vertical.get() {
21            format!("bottom: calc({} * (100% - var(--thaw-slider__thumb--size)) + var(--thaw-slider__thumb--size) / 2)", value)
22        } else {
23            format!("left: calc({} * (100% - var(--thaw-slider__thumb--size)) + var(--thaw-slider__thumb--size) / 2)", value)
24        }
25    };
26
27    view! {
28        <div
29            class=class_list![
30                "thaw-slider-label",
31            move || format!("thaw-slider-label--{}", if slider.vertical.get() { "vertical" } else { "horizontal" }),
32            class
33            ]
34            style=style
35        >
36
37            {children()}
38        </div>
39    }
40}