f7Slider {shinyMobile}

Framework7 range slider

Description

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