add text/color input

This commit is contained in:
Swrup 2024-04-16 02:15:55 +02:00
parent 06e06a4339
commit ff30021434
4 changed files with 210 additions and 73 deletions

View file

@ -1,6 +1,7 @@
(* This add a slidder to into <main>
moving the slider print its value to the console *)
open Brr
open Slippery_slidy
let append_el_to_main el =
let main =
@ -13,21 +14,20 @@ let append_el_to_main el =
let () =
let datalist =
Slippery_slidy.mk_datalist
mk_datalist
(List.map Jstr.of_float [ 2.; 3.; 5.; 8.; 13. ])
"my-slider-datalist"
in
let slider =
Slippery_slidy.mk_slider ~min:0. ~max:100. ~step:Any ~value:50.
~id:"my-slider" ~label:"Important slider, slide carefully"
mk_slider ~min:0. ~max:100. ~step:Any ~value:50. ~id:"my-slider"
~label:"Important slider, slide carefully"
~datalist_id:(Some datalist.datalist_id)
in
append_el_to_main slider.el;
append_el_to_main (el slider);
(* don't forget to add datalist to document too! *)
append_el_to_main datalist.datalist_el;
(* add listener on slider change *)
Slippery_slidy.add_slider_input_listener slider (fun x ->
Printf.printf "slider value: %f !!@." x );
Slippery_slidy.mk_dragable slider;
add_input_listener slider (fun x -> Printf.printf "slider value: %f !!@." x);
mk_dragable slider;
()

View file

@ -1,4 +1,4 @@
.slippery-slidy-container {
.brridget-container {
display: flex;
flex-direction: column;
position: fixed;