CODEWITHSUNDEEP
rshiny
Jimbo
Jimbo

Reputation: 938

Custom play button for slider input in Shiny?

http://shiny.rstudio.com/reference/shiny/latest/sliderInput.html says that you can modify the appearance of the play button in slider input by using HTML tags or a character vector. I want my play button to be a bit bigger or use an image instead, I can't quite get it to work and can't find an example of someone who has used the playButton or pauseButton parameter on Google. Any tips?

Adding the following as a parameter:

playbutton=HTML("<img src=\"~/www/play.png\">")

gives an unused argument error

Upvotes: 4

Views: 3681

Answers (2)

Jaccar
Jaccar

Reputation: 1844

I know this is an old question, but wanted to add another approach as there isn't much information out there!

If you simply want to make the play/pause button bigger, you can do this with css. The important thing to note is that it is done by changing the font size of the icon, not any other size parameters like height or width. Add a line like this into your UI (mine is at the start of DashboardBody(), though it will depend on the structure of your app what you have):

tags$head(tags$style(type='text/css', ".slider-animate-button { font-size: 20pt !important; }"))

Upvotes: 6

jrdnmdhl
jrdnmdhl

Reputation: 1955

playButton is not an argument to sliderInput. Instead, playButton is an argument to animationOptions which is used for animate argument of sliderInput.

See here for details: http://shiny.rstudio.com/reference/shiny/latest/sliderInput.html

However, I tried setting up a custom play button in this manner and it did not work. You may need to just write the HTML of the slider yourself, which is not at all hard to do. Here is the HTML output of a generic slider w/ animation controls:

      <div class="form-group shiny-input-container">
        <label class="control-label" for="bins">Number of bins:</label>
        <input class="js-range-slider" id="bins" data-min="1" data-max="50" data-from="30" data-step="1" data-grid="true" data-grid-num="9.8" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="2.04081632653061"/>
        <div class="slider-animate-container">
          <a href="#" class="slider-animate-button" data-target-id="bins" data-interval="1000" data-loop="FALSE">
            <span class="play">
              <i class="glyphicon glyphicon-play"></i>
            </span>
            <span class="pause">
              <i class="glyphicon glyphicon-pause"></i>
            </span>
          </a>
        </div>
      </div>

You can edit the HTML for the play/pause sections to look how you like as well as the various parameters of the slider.

Upvotes: 2

Related Questions