sliderInput Max/Min-Text von Etiketten

Ich arbeite derzeit an einem dashboard mit mehreren sliderInputs. Ist es möglich, das zu ersetzen die max-und min-Etiketten mit text? Zum Beispiel, mein min = 1 und max = 10. Ich will, dass die Skala von 1 bis 10, während die slider-labels erscheinen wie „früher“ und „später“ ersetzt.

Dank!

InformationsquelleAutor Caleb Lam | 2016-11-04



4 Replies
  1. 2

    Die kurze Antwort ist hier Nein, leider; kurz der Hacker durch den zugrunde liegenden code in JavaScript gibt es keine Möglichkeit, zu entsprechenden Schieberegler-ticks (obwohl es ein paar Formatierungs-Parameter).

    Jedoch, Sie kann hack der Etiketten in der widget-label, indem Sie ein HTML-Objekt-Stil mit inline-CSS. Stellen Sie sicher, dass die Breite des widget selbst, also richtet sich alles, und das Ergebnis ist nicht allzu schlecht:

    library(shiny)
    
    ui <- fluidPage(
    
        sliderInput(inputId = 'slider', 
                    label = div(style='width:300px;', 
                                div(style='float:left;', 'sooner'), 
                                div(style='float:right;', 'later')), 
                    min = 0, max = 10, value = 5, width = '300px')
    
        )
    
    server <- function(input, output) {
    
    }
    
    shinyApp(ui, server)

    sliderInput Max/Min-Text von Etiketten

    • Dies zu tun, für jetzt. Vielen Dank!
  2. 1

    Vielleicht somethin wie diese. Nur beachten Sie, dass der regler gibt einen index, beginnend bei null.

    app.R

        library(shiny)
    
        df <- data.frame(x=1:24)
    
    
        ui <- tagList(
                tags$head(
                        HTML("<script type='text/javascript' src='js/sliderInit.js'></script>")
                ),
                fluidPage(
    
    
           titlePanel("Custom firs and last label"),
    
    
           sidebarLayout(
              sidebarPanel(
                 sliderInput("hour",
                             "Select hour:",
                             min = 1,
                             max = 10,
                             value = 5)
              ),
    
    
              mainPanel(
                 textOutput("selectedNumber")
              )
           )
        ))
    
    
        server <- function(input, output) {
    
           output$selectedNumber <- renderText({
                   df[input$hour+1,]
           })
        }
    
    
        shinyApp(ui = ui, server = server)

    sliderInit.js

    $(document).ready(function() {
        $("#hour").ionRangeSlider({
                values: ["Sooner", "2", "3", "4", "5", "6", "7", "8", "9", "Later"]
        });
        });
  3. 1

    diese kann getan werden, durch die Manipulation der prettify Funktion ionRangeSlider gibt die regler-Beschriftungen für jeden Wert in der Reihe der wählbaren Werte des Reglers. Erstellen Sie einfach eine Datei slider.js wie folgt (geben Sie Ihren regler-ID und den niedrigsten auswählbaren Wert im markierten stellen) und fügen ihn in Ihre app mit includeScript('slider.js'):

    $(document).ready(function() {
      /**
        Custom slider labels
      **/
    
        // Convert numbers of min to max to "lower" and "higher"
        function returnLabels(value) {
          // remove label of selected
          $('.my_slider').find('.irs-single').remove();
        //  $('.my_slider').find('.irs-grid-text').remove(); // this is an alternative to ticks=F
    
          if (value === 0){ // enter your lowest slider value here
            return "lower";
          }else{
            return "higher";
          }
        }
    
        var someID = $("#YOUR_SLIDER_ID").ionRangeSlider({ // enter your shiny slider ID here
              prettify: returnLabels,
              force_edges: true,
              grid: false
            });
        });

    Dann wickeln Sie Ihre regler in einem div mit der Klasse „my_slider“:

    library(shiny)    
    ui <- fluidPage(
      includeScript("slider.js"),
      div(class="my_slider", # to be able to manipulate it with JQuery
          sliderInput("YOUR_SLIDER_ID",
                      "Slider Value:", ticks = F,
                      min = 0, max = 50, value = 30))      
    )
    
    server <- function(input, output) {}    
    shinyApp(ui, server)

    Das Ergebnis sieht wie folgt aus:

    sliderInput Max/Min-Text von Etiketten

    Um den Fehler zu beheben, die Beschriftungen verschwinden, wenn min/max Wert ausgewählt ist, definieren Sie diese UIoutput in Ihrer app:

    # Just a small fix to reactivate Labels when Min/Max value is chosen
    output$fixSlider <- renderUI({     
     # declare dependency on slider
     input$YOUR_SLIDER_ID     
     minVis <- "$('.my_slider').find('.irs-min').attr('style','visibility: visible');"
     maxVis <- "$('.my_slider').find('.irs-max').attr('style','visibility: visible');"  
     return(tags$script(paste(minVis,maxVis)))
    })

    Du bist herzlich willkommen 🙂

    • Dein Ansatz sieht vielversprechend aus, aber ich kann es nicht arbeiten. Könnten Sie ein Beispiel für copy&paste einschließlich der R-code? Neben: ich denke du meinst includeScript(‚labels.js‘)
    • Dank Julian. Ich habe noch die minimale shiny app-code. Bemerkte ich verwendet # für Javascript-Kommentare, die war falsch ( // korrekt ist). Sehen Sie, ob das Ihr problem behebt.
    • jetzt funktioniert es für mich. Es ist wichtig, dass der Aufruf zu includeScript(„slider.js“) wird innerhalb der Aufruf der Shinypage (fluidpage). Und die „#“ vor „YOUR_SLIDER_ID“ ist auch wichtig 😉
    • Zusätzlich: Sie können die Bezeichnung der gewählten (kommentieren Sie die Zeile aus), wenn Sie repleace der wenn-Klausel mit: if (value === 1){ /** enter your lowest slider value here **/ return "lower"; }else if (value === 50){/** enter your highest slider value here **/ return "higher"; } else return value;
  4. 0

    Ich hatte das gleiche problem mit Ihnen. Leider, weder Glänzend noch ionRangeSlider bietet eine einfache Funktionalität, die für solche änderungen. Nach der Suche für eine subtilere Art und Weise mit schiere Sturheit, stieß ich auf die folgende CSS-hack. (Ich habe auch hid-Wert cursor mit JS.)

    ui <- fluidPage(
    
    tags$head(
        #Using ionRangeSlider's javascript options you can hide/show selector labels and min/max labels
        HTML("
        <script>
        $(document).ready(function(){
            $(\".js-range-slider\").ionRangeSlider({
            hide_min_max: false,
            hide_from_to: true
            });
    
        });
    
        </script>
        ")
    ),
    
    #This CSS hack first hides the text within the span tags of the specified classes
    #Then it adds desired text and CSS properties. !important parameter is to override
    #inline css parameters.
    tags$style(type = "text/css", "
        .irs-min {visibility:hidden !important;}
        .irs-max {visibility:hidden !important;}
        .js-irs-0 .irs .irs-min:after {content:'Hello' !important;}
        .js-irs-0 .irs .irs-max:after {content:'Shiny' !important;}
        //Restore css defaults to .irs-min and .irs-max
        .irs-min:after {
            visibility: visible !important;
            display: block;
            background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
            border-radius: 3px;
            color: #333;
            font-size: 10px;
            line-height: 1.333;
            padding: 1px 3px;
            text-shadow: none;
            top: 0;
            cursor: default;
            display: block;
            left: 0;
            position: absolute;}
    
        .irs-max:after {
            visibility: visible !important;
            display: block;
            background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
            border-radius: 3px;
            color: #333;
            font-size: 10px;
            line-height: 1.333;
            padding: 1px 3px;
            text-shadow: none;
            top: 0;
            cursor: default;
            display: block;
            right: 0;
            position: absolute;}
    
    "),
    
    sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
    
    )
    
     server <- function(input, output, session){
    
       }
    
    shinyApp(ui = ui, server=server)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.