Package 'shinyChakraSlider'

Chakra number input

Description

This creates a number input in the Shiny UI.

Usage

chakraNumberInput(
  inputId,
  label = NULL,
  value,
  min,
  max,
  step = NULL,
  size = "md",
  options = list()
)

Arguments

inputId	the input slot that will be used to access the value
label	the label for the widget; this can be some HTML code
value	initial value
min	minimum allowed value
max	maximum allowed value
step	stepping interval to use when adjusting the value
size	size of the widget, can be "sm" (small), "md" (medium) or "lg" (large)
options	a list of options for the number input created with numberInputOptions; note that the width has to be set here

---

Chakra slider

Description

This creates a chakra slider in the Shiny UI. A chakra slider has two elements: a number input and a slider, which are linked together.

Usage

chakraSliderInput(
  inputId,
  label = NULL,
  value,
  min,
  max,
  step = NULL,
  width = "100%",
  size = "md",
  numberInputOptions = list(),
  trackColor = NULL,
  thumbOptions = list(),
  gap = "2rem"
)

Arguments

inputId	the input slot that will be used to access the value
label	the label for the widget; this can be some HTML code
value	initial value
min	minimum allowed value
max	maximum allowed value
step	stepping interval to use when adjusting the value
width	width of the widget, e.g. "50%" or "200px"
size	size of the widget, can be "sm" (small), "md" (medium) or "lg" (large)
numberInputOptions	list of options for the number input; see numberInputOptions
trackColor	color(s) for the track of the slider, can be a single color or a vector of two colors, one for the left side and one for the right side
thumbOptions	list of options for the thumb of the slider; see thumbOptions
gap	size of the gap between the number input and the slider, e.g. "3px" or "5%"

Examples

library(shiny)
library(shinyChakraSlider)

ui <- fluidPage(
  br(),
  chakraSliderInput(
    "slider",
    label = tags$span(
      style = "font-size: 20px; font-style: italic; color: darkred;",
      "Chakra Slider"
    ),
    value = 5, min = 0, max = 10, step = 0.5,
    width = "50%", size = "lg",
    numberInputOptions = numberInputOptions(
      width = "25%",
      fontSize = "15px",
      fontColor = "navyblue",
      borderColor = "gold",
      borderWidth = "medium",
      focusBorderColor = "navyblue",
      stepperColor = c("palegreen", "lightpink")
    ),
    trackColor = c("lightpink2", "springgreen"),
    thumbOptions = thumbOptions(
      width = "30px",
      height = "30px",
      color = "white",
      borderColor = "darkblue",
      borderWidth = "8px",
      icon = "circle",
      iconSize = "2.5em"
    )
  ),
  br(),
  tags$div(
    style = "width: 50%;",
    wellPanel(
      style =
        "vertical-align: top; width: 150px; padding: 11.5px; float: left;",
      textOutput("value"),
    ),
    tags$div(
      style = "float: right;",
      actionButton("update", "Update value", class = "btn-danger btn-lg")
    )
  )
)

server <- function(input, output, session){

  output[["value"]] <- renderText({
    paste0("Value: ", input[["slider"]])
  })

  observeEvent(input[["update"]], {
    updateChakraSliderInput(session, "slider", value = 8)
  })

}

if(interactive()){
  shinyApp(ui, server)
}

---

Options for chakra number input or for the number input of a chakra slider

Description

Create a list of options to be passed to numberInputOptions in chakraNumberInput or chakraSliderInput.

Usage

numberInputOptions(
  width = NULL,
  fontSize = NULL,
  fontColor = NULL,
  borderColor = NULL,
  focusBorderColor = NULL,
  borderWidth = NULL,
  stepperColor = NULL
)

Arguments

width	width of the number input, e.g. "100px" or "20%"
fontSize	font size of the displayed value, e.g. "15px"
fontColor	color of the displayed value
borderColor	color of the border of the number input
focusBorderColor	color of the border of the number input on focus
borderWidth	width of the border of the number input, e.g. "3px" or "medium"
stepperColor	color(s) of the steppers, can be a single color or a vector of two colors, one for each stepper (increment and decrement)

---

Options for the thumb of a chakra slider

Description

Create a list of options to be passed to thumbOptions in chakraSliderInput

Usage

thumbOptions(
  width = NULL,
  height = NULL,
  color = NULL,
  borderColor = NULL,
  borderWidth = NULL,
  icon = NULL,
  iconColor = NULL,
  iconSize = NULL
)

Arguments

width	width of the thumb, e.g. "30px"
height	height of the thumb, e.g. "30px"
color	color of the thumb
borderColor	color of the border of the thumb
borderWidth	width of the border of the thumb, e.g. "3px" or "thin"
icon	an icon for the thumb, can be "circle", "dotCircle", "bigdotCircle" or "arrows"
iconColor	color of the icon
iconSize	size of the icon, e.g. "10px" or "3em"

---

Update a chakra number input

Description

Update the value of a chakra number input.

Usage

updateChakraNumberInput(session, inputId, value)

Arguments

session	the Shiny session object
inputId	the id of the chakra number input to update
value	the new value of the chakra number input

---

Update a chakra slider

Description

Update the value of a chakra slider.

Usage

updateChakraSliderInput(session, inputId, value)

Arguments

session	the Shiny session object
inputId	the id of the chakra slider to update
value	the new value of the chakra slider

---