Interactive text with a slider

[Uriah]

Hi everyone!

I want to make an interactive HTML text that reacts to a slider. I can do that in plotly, but it doesn't render very well and I'm kind of doing dirty hacking. I made a reprex:

library(plotly)
library(dplyr)
data.frame(text = paste(
  "i want to eat",
  1:7,
  "coockies"),
  idx = 1:7) %>%
  plot_ly(frame =~ idx) %>%
  add_text(text =~ text, x = 1, y = 1,
           textfont = list(size = 40)) %>%
  layout(
    xaxis = list(
      title = "",
      zeroline = FALSE,
      showline = FALSE,
      showticklabels = FALSE,
      showgrid = FALSE
    ),
    yaxis = list(
      title = "",
      zeroline = FALSE,
      showline = FALSE,
      showticklabels = FALSE,
      showgrid = FALSE
    ),
    showlegend = F
  ) %>%
  config(displayModeBar = F)

Any ideas?

[cderv]

I think you could do that using a Rmarkdown document with shiny runtime. Only drawback: you'll need to host your file on a server with R and shiny (like shinyapps.io)

Chapter 19 Shiny Documents | R Markdown: The Definitive Guide

Otherwise, it think it could be done with some JS code:

---
output: html_document
---

<input id="slide" type="range" min="1" max="100" step="1" value="1">

Some text with a value to change. The value is [1]{#slidevalue}

```{js, echo = FALSE}
var slide = document.getElementById('slide')
var sliderValue = document.getElementById("slidevalue");

slide.onchange = function() {
    sliderValue.innerHTML = this.value;
}
```

The syntax [text]{#id} is from pandoc extension bracketed_span and allow to create html <span> with some id, class and attributes. You can use <span id="slidevalue">1</span> directly if you prefer.

For the input design, you can use any jss or css to improve.

Hope it helps.