[Porting] MultiSlider + example

NAMESPACE

@@ -37,6 +37,8 @@ export(Label)
 export(Menu)
 export(MenuDivider)
 export(MenuItem)
+export(MultiSlider)
+export(MultiSliderHandle)
 export(Navbar)
 export(NavbarDivider)
 export(NavbarGroup)

R/components.R

@@ -25,6 +25,17 @@ component <- function(name) {
   }
 }
 
+properties <- function(name) {
+  function(...) {
+    shiny.react::reactElement(
+      module = "@/appsilon.blueprint",
+      name = name,
+      props = shiny.react::asProps(...),
+      deps = blueprintDependency()
+    )
+  }
+}
+
 button <- function(name) {
   function(inputId, ...) {
     shiny.react::reactElement(
@@ -445,6 +456,19 @@ RangeSlider <- component("RangeSlider")
 #' @export
 RangeSlider.shinyInput <- input("RangeSlider", c(0, 0)) # nolint
 
+#' MultiSlider
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/sliders.multi-slider>
+#'
+#' @example inst/examples/components/MultiSlider.R
+#' @inherit template params
+#' @export
+MultiSlider <- component("MultiSlider")
+
+#' @rdname MultiSlider
+#' @export
+MultiSliderHandle <- properties("MultiSliderHandle")
+
 #' Switch
 #'
 #' Documentation: <https://blueprintjs.com/docs/#core/components/switch>

inst/examples/components/MultiSlider.R

@@ -0,0 +1,57 @@
+library(shiny)
+library(appsilon.blueprint)
+
+if (interactive()) shinyApp(
+  ui = reactOutput("multiSliderOutput"),
+  server = function(input, output) {
+
+    thresholds <- reactiveValues(
+      dangerStart = 3,
+      warningStart = 8,
+      warningEnd = 14,
+      dangerEnd = 17
+    )
+
+    observeEvent(input$mutliSliderInput, {
+      sliderValues <- sort(input$mutliSliderInput)
+      thresholds$dangerStart <- sliderValues[1]
+      thresholds$warningStart <- sliderValues[2]
+      thresholds$warningEnd <- sliderValues[3]
+      thresholds$dangerEnd <- sliderValues[4]
+    })
+
+    output$multiSliderOutput <- renderReact({
+      MultiSlider(
+        defaultTrackIntent = "success",
+        onChange = setInput("mutliSliderInput"),
+        stepSize = 1,
+        min = 0,
+        max = 20,
+        MultiSliderHandle(
+          type = "start",
+          intentBefore = "danger",
+          value = thresholds$dangerStart,
+          interactionKind = "push"
+        ),
+        MultiSliderHandle(
+          type = "start",
+          intentBefore = "warning",
+          value = thresholds$warningStart,
+          interactionKind = "push"
+        ),
+        MultiSliderHandle(
+          type = "end",
+          intentAfter = "warning",
+          value = thresholds$warningEnd,
+          interactionKind = "push"
+        ),
+        MultiSliderHandle(
+          type = "end",
+          intentAfter = "danger",
+          value = thresholds$dangerEnd,
+          interactionKind = "push"
+        )
+      )
+    })
+  }
+)

js/src/inputs.jsx

@@ -34,6 +34,8 @@ export const RangeSlider = InputAdapter(Blueprint.RangeSlider, (value, setValue)
   onChange: setValue,
 }));
 
+export const MultiSliderHandle = Blueprint.MultiSlider.Handle;
+
 export const Switch = InputAdapter(Blueprint.Switch, (value, setValue) => ({
   checked: value,
   onChange: (event) => setValue(event.target.checked),