Search code examples
htmlrbootstrap-4shinyshinywidgets

want to create custom numericRangeInput with similar arguments


I am making a custom numericRangeInput with the same functionality as the one from [shinyWidgets] for aesthetic reasons.1 However, I am having trouble mimicking this one argument.

I would like one inputId for the whole component where I can call the values the same way as shinyWidget's input.

Here is what I have so far:

library(tidyverse)

numeric_input_ui <- function(title = "title", text = "to", id = c("id1","id2"), placeholder = c(0,0), value = c(0,0)){
  HTML(
    str_glue(
      '<label>{title}
      <div class="input-group input-group-sm m-4" style="margin:0px!important;margin-top:5px!important;margin-bottom:10px!important;">
  <input class="form-control" type="number" id="{id[1]}" placeholder="{placeholder[1]}" value="{value[1]}">
  <div class="input-group-prepend input-group-append">
    <div class="input-group-text">{text}</div>
  </div>
  <input class="form-control" type="number" id="{id[2]}" placeholder="{placeholder[2]}" value="{value[2]}"></input>
</div>
      </label>'
    )
  )
}

As you can see, I have it set up at the moment with two IDs... This makes it a headache when managing the server-side since I am trying to implement this on a shiny application. Any advice for the function itself outside of my question is welcomed!


Solution

  • I'm not sure to understand. Why don't you use a unique id that you split:

    numeric_input_ui <- function(
      title = "title", text = "to", id, placeholder = c(0,0), value = c(0,0)
    ){
      id1 <- paste0(id, "1")
      id2 <- paste0(id, "2")
      HTML(
        str_glue(
          '
    <label>
       {title}
       <div class="input-group input-group-sm m-4" style="margin:0px!important;margin-top:5px!important;margin-bottom:10px!important;">
          <input class="form-control" type="number" id="{id1}" placeholder="{placeholder[1]}" value="{value[1]}">
          <div class="input-group-prepend input-group-append">
             <div class="input-group-text">{text}</div>
          </div>
          <input class="form-control" type="number" id="{id2}" placeholder="{placeholder[2]}" value="{value[2]}">
       </div>
    </label>
    '
        )
      )
    }
    

    Then in the server you use a reactive conductor returning the two values:

    numInput <- reactive({
      c(input[[paste0(id, "1")]], input[[paste0(id, "2")]])
    })
    

    What would be the inconvenient with this way? Without more context, it's hard to figure out your problem.