Created
January 20, 2016 03:05
-
-
Save richshaw/d55c4f0cb10cdfebd425 to your computer and use it in GitHub Desktop.
How to customize Slider labels in Shiny
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var now = new Date(); | |
| var now_bin = now.getHours() * 2; // bin number, 30-minute bins | |
| if (now.getMinutes() >= 30) { | |
| now_bin += 1; | |
| } | |
| /** | |
| Function to convert bin numbers 0 to 47 | |
| to time segments in words. | |
| This is an example you can use whatever | |
| function you like to render your labels. | |
| */ | |
| function binNumberToWords(bin_num) { | |
| var hour = Math.floor(bin_num / 2); | |
| if (bin_num == now_bin) { | |
| return 'Right Now'; | |
| } else if (hour > 12) { | |
| ampm_start = "pm"; | |
| ampm_finish = "pm"; | |
| hour -= 12; | |
| } else if (hour == 0) { | |
| ampm_start = "am"; | |
| ampm_finish = "am"; | |
| hour = 12; | |
| } else if (hour == 12) { | |
| ampm_start = "pm"; | |
| ampm_finish = "pm"; | |
| } else { | |
| ampm_start = "am"; | |
| ampm_finish = "am"; | |
| } | |
| var remainder = bin_num % 2; | |
| if (remainder > 0) { | |
| var time_span = hour + ":30"+ampm_start+"-" + hour + ":59"+ampm_finish; | |
| } else { | |
| var time_span = hour + ":00"+ampm_start+"-" + hour + ":29"+ampm_finish; | |
| } | |
| return time_span; | |
| } | |
| /** | |
| Tweak ionRangeSlider options | |
| prettify tells the ionRangeSlider to | |
| use our binNumberToWords function to | |
| render the slider labels | |
| */ | |
| var slider = $("#timeOfDay").ionRangeSlider({ | |
| prettify: binNumberToWords, | |
| }); | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| library(shiny) | |
| shinyUI(fluidPage( | |
| # Adds custom JS to head of Shiny HTML page | |
| tags$head(includeScript('slider.js')), | |
| )) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| library(shiny) | |
| shinyUI(fluidPage( | |
| # Adds custom JS to head of Shiny HTML page | |
| tags$head(includeScript('slider.js')), | |
| verticalLayout( | |
| wellPanel( | |
| sliderInput("timeOfDay", | |
| "Time of day:", | |
| min = 0, | |
| max = 47, | |
| value = 24), | |
| selectInput("sex", | |
| "Sex:", | |
| c("Males" = "male", | |
| "Females" = "female"), | |
| selected = "male"), | |
| selectInput("ageGrp", "Age:", | |
| c("15 to 24" = 0, | |
| "25 to 34" = 1, | |
| "35 to 44" = 2, | |
| "45 to 54" = 3, | |
| "55 to 64" = 4, | |
| "65+" = 5), | |
| selected = 2) | |
| ), | |
| ), | |
| )) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment