| Title: | Combined Slider and Numeric Input for 'Shiny' |
| Version: | 0.1.0 |
| Description: | Provides a combined slider and numeric input for usage in a 'Shiny' app. The slider and the numeric input are linked together: each one is updated when the other one changes. Many styling properties are customizable (e.g. colors and size). |
| URL: | https://github.com/stla/shinyChakraSlider |
| BugReports: | https://github.com/stla/shinyChakraSlider/issues |
| License: | GPL-3 |
| Encoding: | UTF-8 |
| LazyData: | true |
| Imports: | htmltools, shiny, reactR, grDevices, utils |
| RoxygenNote: | 7.1.1 |
| NeedsCompilation: | no |
| Packaged: | 2020-08-26 12:30:33 UTC; stla |
| Author: | Stéphane Laurent [aut, cre], Segun Adebayo [ctb, cph] ('chakra-ui' library (https://github.com/chakra-ui/chakra-ui)), Goran Gajic [ctb, cph] ('react-icons' library (https://github.com/react-icons/react-icons)), Peter Newnham [ctb, cph] ('react-html-parser' library (https://github.com/wrakky/react-html-parser)) |
| Maintainer: | Stéphane Laurent <laurent_step@outlook.fr> |
| Repository: | CRAN |
| Date/Publication: | 2020-08-31 10:00:02 UTC |
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 |
options |
a list of options for the number input created with
|
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. |
size |
size of the widget, can be |
numberInputOptions |
list of options for the number input;
see |
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 |
gap |
size of the gap between the number input and the slider,
e.g. |
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. |
fontSize |
font size of the displayed value, e.g. |
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. |
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. |
height |
height of the thumb, e.g. |
color |
color of the thumb |
borderColor |
color of the border of the thumb |
borderWidth |
width of the border of the thumb, e.g.
|
icon |
an icon for the thumb, can be |
iconColor |
color of the icon |
iconSize |
size of the icon, e.g. |
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 |