tallyweb_components/
slider.rs

1use leptos::*;
2
3#[component]
4pub fn Slider(
5    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
6    #[prop(into)] checked: MaybeSignal<bool>,
7) -> impl IntoView {
8    view! {
9        <label>
10            <style>
11                r#"
12                switch-el {
13                    position: relative;
14                    display: inline-block;
15                    min-width: 60px;
16                    max-width: 60px;
17                    height: 34px;
18                    margin: auto 0px;
19                }
20                
21                slider-el {
22                    position: absolute;
23                    cursor: pointer;
24                    top: 0;
25                    left: 0;
26                    right: 0;
27                    bottom: 0;
28                    background: var(--accent, #3584E4);
29                    -webkit-transition: .32s;
30                    transition: .32s;
31                    border-radius: 34px;
32                }
33                
34                slider-el:before {
35                    position: absolute;
36                    content: "";
37                    height: 26px;
38                    width: 26px;
39                    left: 4px;
40                    bottom: 4px;
41                    background: white;
42                    -webkit-transition: .32s;
43                    transition: .32s;
44                    border-radius: 50%;
45                }
46                
47                input:focus+slider-el {
48                    box-shadow: 0 0 1px #2196F3;
49                }
50                
51                input:checked+slider-el:before {
52                    -webkit-transform: translateX(26px);
53                    -ms-transform: translateX(26px);
54                    transform: translateX(26px);
55                }
56                
57                input:not(:checked)+slider-el {
58                    background: #CCC;
59                }
60                
61                input:disabled+slider-el {
62                    filter: brightness(60%);
63                }
64                
65                @keyframes slide {
66                    100% {
67                        left: 0;
68                    }
69                }
70                "#
71            </style>
72            <switch-el>
73                <input
74                    type="checkbox"
75                    {..attrs}
76                    style:display="none"
77                    prop:checked=checked
78                    checked=checked
79                />
80                <slider-el class="slider"></slider-el>
81            </switch-el>
82        </label>
83    }
84}
tallyweb_components/slider.rs

tallyweb_components/
slider.rs
