want to create custom numericRangeInput with similar arguments

Question

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!

score 1 · Accepted Answer · answered Oct 20 '21 at 10:33

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.

I was wondering if I was missing something within the html component itself since the shinyWidgets version does not (from what I understand) need a separate reactive function to separate the values. My issue is scalability, I am trying to build a custom filter on a table and will probably have many numeric inputs among them. I am not sure if there are other solutions beside what you're saying, for I have come to the same, otherwise it's fine! But yes, this is mostly what I was asking. — niceguy, Oct 20 '21 at 16:58

want to create custom numericRangeInput with similar arguments

1 Answers1