Framework7 range slider — f7Slider • shinyMobile

f7Slider creates a f7 slider input.

updateF7Slider changes the value of a slider input on the client.

Usage

f7Slider(
  inputId,
  label,
  min,
  max,
  value,
  step = 1,
  scale = FALSE,
  scaleSteps = 5,
  scaleSubSteps = 0,
  vertical = FALSE,
  verticalReversed = FALSE,
  labels = NULL,
  color = NULL,
  noSwipping = TRUE,
  showLabel = TRUE,
  ...,
  style = list(inset = FALSE, outline = FALSE, strong = FALSE)
)

updateF7Slider(
  inputId,
  min = NULL,
  max = NULL,
  value = NULL,
  scale = FALSE,
  scaleSteps = NULL,
  scaleSubSteps = NULL,
  step = NULL,
  color = NULL,
  ...,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

inputId: Slider input id.
label: Slider label.
min: Slider minimum range.
max: Slider maximum range.
value: Slider value or a vector containing 2 values (for a range).
step: Slider increase step size.
scale: Slider scale.
scaleSteps: Number of scale steps.
scaleSubSteps: Number of scale sub steps (each step will be divided by this value).
vertical: Whether to apply a vertical display. FALSE by default.
verticalReversed: Makes vertical range slider reversed (vertical must be also enabled). FALSE by default.
labels: Enables additional label around range slider knob. List of 2 f7Icon expected.
color: See getF7Colors for valid colors.
noSwipping: Prevent swiping when slider is manipulated in an f7TabLayout.
showLabel: Allow bubble containing the slider value. Default to TRUE.
...: Other options to pass to the widget. See https://framework7.io/docs/range-slider#range-slider-parameters.
style: Allows to style the input. inset, outline and strong are available.
session: The Shiny session object.

Note

labels option only works when vertical is FALSE!

Important: you cannot transform a range slider into a simple slider and inversely.

Examples

library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "updateF7Slider"),
      f7Block(
        f7BlockTitle("Simple slider with custom style", size = "large"),
        f7Button(inputId = "update_slider", label = "Update slider"),
        f7Slider(
          inputId = "slider",
          label = "Number of observations",
          max = 1000,
          min = 0,
          value = 100,
          scaleSteps = 5,
          scaleSubSteps = 3,
          scale = TRUE,
          color = "orange",
          labels = tagList(
            f7Icon("circle"),
            f7Icon("circle_fill")
          ),
          style = list(inset = TRUE, strong = TRUE, outline = TRUE)
        ),
        textOutput("slider_res")
      ),
      f7Block(
        f7BlockTitle("Range slider", size = "large"),
        f7Button(inputId = "update_range", label = "Update slider"),
        f7Slider(
          inputId = "range",
          label = "Range values",
          max = 500,
          min = 0,
          step = 0.01,
          color = "deeppurple",
          value = c(50, 100)
        ),
        textOutput("range_res")
      )
    )
  ),
  server = function(input, output, session) {
    output$slider_res <- renderText({
      input$slider
    })

    observeEvent(input$update_slider, {
      updateF7Slider(
        inputId = "slider",
        value = 0.05,
        min = 0,
        max = 0.01,
        scale = FALSE,
        step = 0.001,
        color = "pink"
      )
    })

    output$range_res <- renderText({
      input$range
    })

    observeEvent(input$update_range, {
      updateF7Slider(
        inputId = "range",
        value = c(1, 5),
        min = 0,
        scale = TRUE,
        step = 0.01,
        max = 10,
        color = "teal"
      )
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app