sliderInput Max/Min 文本标签
sliderInput Max/Min Text Labels
我目前正在使用具有多个 sliderInputs 的仪表板。是否可以用文本替换最大和最小标签?例如,我的 min = 1 和 max = 10。我想将比例保持在 1 到 10 之间,同时让滑块标签分别显示为 "sooner" 和 "later"。
谢谢!
也许是这样的。请注意,滑块将 return 一个从零开始的索引。
app.R
library(shiny)
df <- data.frame(x=1:24)
ui <- tagList(
tags$head(
HTML("<script type='text/javascript' src='js/sliderInit.js'></script>")
),
fluidPage(
titlePanel("Custom firs and last label"),
sidebarLayout(
sidebarPanel(
sliderInput("hour",
"Select hour:",
min = 1,
max = 10,
value = 5)
),
mainPanel(
textOutput("selectedNumber")
)
)
))
server <- function(input, output) {
output$selectedNumber <- renderText({
df[input$hour+1,]
})
}
shinyApp(ui = ui, server = server)
sliderInit.js
$(document).ready(function() {
$("#hour").ionRangeSlider({
values: ["Sooner", "2", "3", "4", "5", "6", "7", "8", "9", "Later"]
});
});
遗憾的是,这里的简短回答是否定的;除非破解 JavaScript 中的底层代码,否则无法重新标记滑块刻度(尽管有一些格式化参数)。
但是,您可以通过向小部件标签传递一个使用内联 CSS 设置样式的 HTML 对象来将标签破解到小部件标签中。确保设置小部件本身的宽度,以便一切都对齐,结果还不错:
library(shiny)
ui <- fluidPage(
sliderInput(inputId = 'slider',
label = div(style='width:300px;',
div(style='float:left;', 'sooner'),
div(style='float:right;', 'later')),
min = 0, max = 10, value = 5, width = '300px')
)
server <- function(input, output) {
}
shinyApp(ui, server)
我和你有同样的问题。不幸的是,Shiny 和 ionRangeSlider 都没有为此类更改提供简单的功能。在顽固地寻找更微妙的方法之后,我遇到了以下 CSS hack。 (我还用JS隐藏了值游标。)
ui <- fluidPage(
tags$head(
#Using ionRangeSlider's javascript options you can hide/show selector labels and min/max labels
HTML("
<script>
$(document).ready(function(){
$(\".js-range-slider\").ionRangeSlider({
hide_min_max: false,
hide_from_to: true
});
});
</script>
")
),
#This CSS hack first hides the text within the span tags of the specified classes
#Then it adds desired text and CSS properties. !important parameter is to override
#inline css parameters.
tags$style(type = "text/css", "
.irs-min {visibility:hidden !important;}
.irs-max {visibility:hidden !important;}
.js-irs-0 .irs .irs-min:after {content:'Hello' !important;}
.js-irs-0 .irs .irs-max:after {content:'Shiny' !important;}
//Restore css defaults to .irs-min and .irs-max
.irs-min:after {
visibility: visible !important;
display: block;
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
border-radius: 3px;
color: #333;
font-size: 10px;
line-height: 1.333;
padding: 1px 3px;
text-shadow: none;
top: 0;
cursor: default;
display: block;
left: 0;
position: absolute;}
.irs-max:after {
visibility: visible !important;
display: block;
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
border-radius: 3px;
color: #333;
font-size: 10px;
line-height: 1.333;
padding: 1px 3px;
text-shadow: none;
top: 0;
cursor: default;
display: block;
right: 0;
position: absolute;}
"),
sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
)
server <- function(input, output, session){
}
shinyApp(ui = ui, server=server)
这可以通过操纵 ionRangeSlider 的 prettify
函数来完成,其中 returns 滑块为可选滑块值范围内的每个值添加标签。只需按如下方式创建一个文件 slider.js
(在标记点输入您的滑块 ID 和最低可选值)并将其包含在您的应用中 includeScript('slider.js')
:
$(document).ready(function() {
/**
Custom slider labels
**/
// Convert numbers of min to max to "lower" and "higher"
function returnLabels(value) {
// remove label of selected
$('.my_slider').find('.irs-single').remove();
// $('.my_slider').find('.irs-grid-text').remove(); // this is an alternative to ticks=F
if (value === 0){ // enter your lowest slider value here
return "lower";
}else{
return "higher";
}
}
var someID = $("#YOUR_SLIDER_ID").ionRangeSlider({ // enter your shiny slider ID here
prettify: returnLabels,
force_edges: true,
grid: false
});
});
然后,将滑块包裹在 div 中 class "my_slider":
library(shiny)
ui <- fluidPage(
includeScript("slider.js"),
div(class="my_slider", # to be able to manipulate it with JQuery
sliderInput("YOUR_SLIDER_ID",
"Slider Value:", ticks = F,
min = 0, max = 50, value = 30))
)
server <- function(input, output) {}
shinyApp(ui, server)
结果如下:
要修复选择 min/max 值时标签消失的错误,请在您的应用中定义此 UIoutput:
# Just a small fix to reactivate Labels when Min/Max value is chosen
output$fixSlider <- renderUI({
# declare dependency on slider
input$YOUR_SLIDER_ID
minVis <- "$('.my_slider').find('.irs-min').attr('style','visibility: visible');"
maxVis <- "$('.my_slider').find('.irs-max').attr('style','visibility: visible');"
return(tags$script(paste(minVis,maxVis)))
})
不客气:-)
我目前正在使用具有多个 sliderInputs 的仪表板。是否可以用文本替换最大和最小标签?例如,我的 min = 1 和 max = 10。我想将比例保持在 1 到 10 之间,同时让滑块标签分别显示为 "sooner" 和 "later"。
谢谢!
也许是这样的。请注意,滑块将 return 一个从零开始的索引。
app.R
library(shiny)
df <- data.frame(x=1:24)
ui <- tagList(
tags$head(
HTML("<script type='text/javascript' src='js/sliderInit.js'></script>")
),
fluidPage(
titlePanel("Custom firs and last label"),
sidebarLayout(
sidebarPanel(
sliderInput("hour",
"Select hour:",
min = 1,
max = 10,
value = 5)
),
mainPanel(
textOutput("selectedNumber")
)
)
))
server <- function(input, output) {
output$selectedNumber <- renderText({
df[input$hour+1,]
})
}
shinyApp(ui = ui, server = server)
sliderInit.js
$(document).ready(function() {
$("#hour").ionRangeSlider({
values: ["Sooner", "2", "3", "4", "5", "6", "7", "8", "9", "Later"]
});
});
遗憾的是,这里的简短回答是否定的;除非破解 JavaScript 中的底层代码,否则无法重新标记滑块刻度(尽管有一些格式化参数)。
但是,您可以通过向小部件标签传递一个使用内联 CSS 设置样式的 HTML 对象来将标签破解到小部件标签中。确保设置小部件本身的宽度,以便一切都对齐,结果还不错:
library(shiny)
ui <- fluidPage(
sliderInput(inputId = 'slider',
label = div(style='width:300px;',
div(style='float:left;', 'sooner'),
div(style='float:right;', 'later')),
min = 0, max = 10, value = 5, width = '300px')
)
server <- function(input, output) {
}
shinyApp(ui, server)
我和你有同样的问题。不幸的是,Shiny 和 ionRangeSlider 都没有为此类更改提供简单的功能。在顽固地寻找更微妙的方法之后,我遇到了以下 CSS hack。 (我还用JS隐藏了值游标。)
ui <- fluidPage(
tags$head(
#Using ionRangeSlider's javascript options you can hide/show selector labels and min/max labels
HTML("
<script>
$(document).ready(function(){
$(\".js-range-slider\").ionRangeSlider({
hide_min_max: false,
hide_from_to: true
});
});
</script>
")
),
#This CSS hack first hides the text within the span tags of the specified classes
#Then it adds desired text and CSS properties. !important parameter is to override
#inline css parameters.
tags$style(type = "text/css", "
.irs-min {visibility:hidden !important;}
.irs-max {visibility:hidden !important;}
.js-irs-0 .irs .irs-min:after {content:'Hello' !important;}
.js-irs-0 .irs .irs-max:after {content:'Shiny' !important;}
//Restore css defaults to .irs-min and .irs-max
.irs-min:after {
visibility: visible !important;
display: block;
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
border-radius: 3px;
color: #333;
font-size: 10px;
line-height: 1.333;
padding: 1px 3px;
text-shadow: none;
top: 0;
cursor: default;
display: block;
left: 0;
position: absolute;}
.irs-max:after {
visibility: visible !important;
display: block;
background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
border-radius: 3px;
color: #333;
font-size: 10px;
line-height: 1.333;
padding: 1px 3px;
text-shadow: none;
top: 0;
cursor: default;
display: block;
right: 0;
position: absolute;}
"),
sliderInput(inputId="test", label=NULL, min=1, max=10, value=5, step = 1, width='100%')
)
server <- function(input, output, session){
}
shinyApp(ui = ui, server=server)
这可以通过操纵 ionRangeSlider 的 prettify
函数来完成,其中 returns 滑块为可选滑块值范围内的每个值添加标签。只需按如下方式创建一个文件 slider.js
(在标记点输入您的滑块 ID 和最低可选值)并将其包含在您的应用中 includeScript('slider.js')
:
$(document).ready(function() {
/**
Custom slider labels
**/
// Convert numbers of min to max to "lower" and "higher"
function returnLabels(value) {
// remove label of selected
$('.my_slider').find('.irs-single').remove();
// $('.my_slider').find('.irs-grid-text').remove(); // this is an alternative to ticks=F
if (value === 0){ // enter your lowest slider value here
return "lower";
}else{
return "higher";
}
}
var someID = $("#YOUR_SLIDER_ID").ionRangeSlider({ // enter your shiny slider ID here
prettify: returnLabels,
force_edges: true,
grid: false
});
});
然后,将滑块包裹在 div 中 class "my_slider":
library(shiny)
ui <- fluidPage(
includeScript("slider.js"),
div(class="my_slider", # to be able to manipulate it with JQuery
sliderInput("YOUR_SLIDER_ID",
"Slider Value:", ticks = F,
min = 0, max = 50, value = 30))
)
server <- function(input, output) {}
shinyApp(ui, server)
结果如下:
要修复选择 min/max 值时标签消失的错误,请在您的应用中定义此 UIoutput:
# Just a small fix to reactivate Labels when Min/Max value is chosen
output$fixSlider <- renderUI({
# declare dependency on slider
input$YOUR_SLIDER_ID
minVis <- "$('.my_slider').find('.irs-min').attr('style','visibility: visible');"
maxVis <- "$('.my_slider').find('.irs-max').attr('style','visibility: visible');"
return(tags$script(paste(minVis,maxVis)))
})
不客气:-)