How can I return value of roundSlider in Shiny?

user_2724717 0
Viewed 69

I would like to use roundSlider in my Shiny app instead of sliderinput widget. My simple exemplified app is as follow. But I don't know how to return the selected values in the slider. In my example renderPrint only returns NULL. Thanks for any recommendation.

library(shiny)
library(shinyWidgets)

ui = shinyUI(fluidPage(
  
  tags$head(
   
    tags$script(src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"),
    tags$link(href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css", rel="stylesheet" ), 
    tags$script( src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"), 
    
    
  ),
  
   
  
tags$div( id="slider1", class="rslider"),
  tags$script('$("#slider1").roundSlider({
    min:0,
    max:110,
    radius: 80,
    circleShape: "half-top",
    sliderType: "range",
    showTooltip: true,
    value: "0,110"
  });'),
 
  tags$div( id="slider2", class="rslider"),
  tags$script('$("#slider2").roundSlider({
    min:0,
    max:110,
    radius: 80,
    circleShape: "half-top",
    sliderType: "min-range",
    value: 0
  });'),
  
verbatimTextOutput("slidInp1"),
verbatimTextOutput("slidInp2"), 

))

server = function(input, output){
   
  output$slidInp1 <- renderPrint({
 
   print(input$slider1)
  
  })
 
  
  output$slidInp2 <- renderPrint({
    
    print(input$slider2)
    
  })
}

shinyApp(ui = ui, server = server)
shiny r jquery
1 Answers

You can use shinyjs package to run javascript on the server side, and Shiny.onInputChange() to access the value. Try this

library(shiny)
library(shinyWidgets)
library(shinyjs)

ui = shinyUI(fluidPage(
  useShinyjs(),
  tags$head(
    
    tags$script(src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"),
    tags$link(href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css", rel="stylesheet" ), 
    tags$script( src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"), 
    
  ),
  
  tags$div( id="slider1", class="rslider"),
  tags$script('$("#slider1").roundSlider({
    min:0,
    max:110,
    radius: 80,
    circleShape: "half-top",
    sliderType: "range",
    showTooltip: true,
    value: "0,80"
  });'),
  
  tags$div( id="slider2", class="rslider"),
  tags$script('$("#slider2").roundSlider({
    min:0,
    max:110,
    radius: 80,
    circleShape: "half-top",
    sliderType: "min-range",
    value: 40
  });'),
  br(),br(),
  actionButton("btn", "Update"),br(), br(), 
  verbatimTextOutput("slidInp1"),
  verbatimTextOutput("slidInp2"), 
  
))

server = function(input, output){
  
  observeEvent(input$btn, {
    runjs('var slidr1 = $("#slider1").roundSlider("getValue"); Shiny.onInputChange("slidr1",slidr1);')
    runjs('var slidr2 = $("#slider2").roundSlider("getValue"); Shiny.onInputChange("slidr2",slidr2);')
  }, ignoreNULL = FALSE)
  
  output$slidInp1 <- renderPrint({
    
    print(input$slidr1)
    
  })
  
  output$slidInp2 <- renderPrint({
    
    print(input$slidr2)
    
  })
}

shinyApp(ui = ui, server = server)

output

user_133332790
Related