update example

examples/dune

@@ -1,5 +1,5 @@
 (executable
- (name slider)
- (modules slider)
+ (name main)
+ (modules main)
  (libraries js_of_ocaml brr slippery_slidy)
  (modes js))

examples/main.ml

@@ -0,0 +1,58 @@
+(* 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 =
+    match El.find_first_by_selector (Jstr.v "main") with
+    | Some main -> main
+    | None -> failwith "append_el_to_main: main element not found"
+  in
+  El.append_children main [ el ];
+  ()
+
+let () =
+  let datalist =
+    mk_datalist (List.map Jstr.v [ "cc"; "sava"; "bb" ]) "my-text-datalist"
+  in
+  let text =
+    mk_text ~min:(Some 0) ~max:(Some 100) ~size:(Some 4) ~value:"?"
+      ~id:"my-text" ~label:"Important text, input carefully"
+      ~datalist_id:(Some datalist.datalist_id)
+  in
+  add_input_listener text (fun s -> Printf.printf "text value: %s\n" s);
+  mk_dragable text;
+  append_el_to_main (el text);
+  append_el_to_main datalist.datalist_el;
+
+  let datalist =
+    mk_datalist
+      (List.map Jstr.of_float [ 2.; 3.; 5.; 8.; 13. ])
+      "my-slider-datalist"
+  in
+  let slider =
+    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
+  add_input_listener slider (fun x -> Printf.printf "slider value: %f\n" x);
+  mk_dragable slider;
+  append_el_to_main (el slider);
+  append_el_to_main datalist.datalist_el;
+
+  let color =
+    mk_color ~value:"#00ff00" ~id:"my-color"
+      ~label:"Important color, pick carefully"
+  in
+  add_input_listener color (fun s -> Printf.printf "color value: %s\n" s);
+  mk_dragable color;
+  append_el_to_main (el color);
+
+  let brridget_grid : El.t =
+    El.div ~d:G.document
+      ~at:[ At.class' (Jstr.v "brridget-grid") ]
+      [ el text; el slider; el color ]
+  in
+  append_el_to_main brridget_grid;
+  ()

examples/slider.ml

@@ -1,33 +0,0 @@
-(* 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 =
-    match El.find_first_by_selector (Jstr.v "main") with
-    | Some main -> main
-    | None -> failwith "append_el_to_main: main element not found"
-  in
-  El.append_children main [ el ];
-  ()
-
-let () =
-  let datalist =
-    mk_datalist
-      (List.map Jstr.of_float [ 2.; 3.; 5.; 8.; 13. ])
-      "my-slider-datalist"
-  in
-  let slider =
-    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 (el slider);
-  (* don't forget to add datalist to document too! *)
-  append_el_to_main datalist.datalist_el;
-
-  (* add listener on slider change *)
-  add_input_listener slider (fun x -> Printf.printf "slider value: %f !!@." x);
-  mk_dragable slider;
-  ()

examples/style.css

@@ -1,7 +1,6 @@
 .brridget-container {
   display: flex;
   flex-direction: column;
-  position: fixed;
   top: 5vh;
   left: 5vw;
   background-color: black;
@@ -10,3 +9,11 @@
   padding-block: 2vh;
   padding-inline: 1vw;
 }
+
+.brridget-grid {
+  display: grid;
+  position: fixed;
+  top: 5vh;
+  left: 4vw;
+  gap: 10%;
+}