jquery - 如何在 Shiny 中返回 roundSlider 的值？

Question

我想用 roundSlider在我的 Shiny 应用程序中，而不是滑块输入小部件。我的简单示例应用程序如下。但我不知道如何在滑块中返回选定的值。在我的示例中，renderPrint 只返回 NULL。感谢您的任何建议。

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)

Answer 1

您可以使用 shinyjs在服务器端运行 javascript 的包，以及 Shiny.onInputChange()访问该值。尝试这个

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)