I’d like to modify the values of the filtering sliders produced by DT in JavaScript. I want to change these values rather than filter the data elsewhere as, ultimately, I want to add presets so you can quickly and easily update the sliders with specific ranges and they will be displayed right above the sliders.
Using runjs()
I’ve successfully selected the slider’s elements as follows:
slider = document.querySelectorAll('.noUi-target')[0];
However, my attempts to set or modify the values of the slider have not been successful. The slider seems to be some form of a noUiSlider, but the examples I’ve seen of setting such a slider’s values have not worked here. My attempts include the following, the first of which worked for a shinyWidgets::noUiSliderInput()
:
slider.noUiSlider.set([10.4, 20])
slider.noUiSlider('options').set([10.4, 20])
slider.setValue([10.4, 20])
I wondered if I needed to import the noUiSlider
JS library somehow, or if the slider isn’t rendered as a noUiSlider or slider at all? Here’s a sample app that lays out the basic structure of what I want to do: When the filterOutHighMPG
button is clicked, I want the values of the filtering slider beneath mpg to be set to 10.4 to 20 and the data filtered accordingly.
library(shiny)
library(DT)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
actionButton('filterOutHighMPG', 'Filter Out High MPG'),
DTOutput('table')
)
server <- function(input, output, session) {
output$table <- renderDT({
datatable(mtcars, filter = 'top')
})
observeEvent(input$filterOutHighMPG, {
# Set mpg filter to [10.4, 20]
runjs("")
})
}
shinyApp(ui, server)
Thanks very much for any help!