如何在值的右侧而不是左侧为滑块着色? [英] How to color the slider in shiny to the right of the value instead of to the left?

问题描述

我正在构建一个闪亮的应用程序，并使用与闪亮画廊中显示的滑块非常相似的滑块 (http://shiny.rstudio.com/gallery/slider-bar-and-slider-range.html).默认情况下，它在所选值的左侧显示为蓝色(在此示例中为 0 到 50).有没有办法让它在所选值的右侧着色:e.i.从50到100?

I am building an app with shiny and use a slider pretty much as the one shown in Shiny gallery (http://shiny.rstudio.com/gallery/slider-bar-and-slider-range.html). By default it gets coloured blue to the left of the chosen value (in this example from 0 to 50). Is there a way to get it coloured to the right of the chosen value: e.i. from 50 to 100?

我想这样做的原因是用户应该将其读取为从阈值到最大值的所有值"，因此从最小值到阈值的着色会产生误导.

The reason I would like to do it, is that the user should read it as "all values from the threshold to max", so colouring from the min to the threshold would be misleading.

有人对此有想法吗?玛丽亚

Has anybody an idea on that? Maria

推荐答案

可能有更好的方法，但这里有一个快速的 css 选项:

There's probably a better way, but here's a quick css option:

library(shiny)
shinyApp( 
  ui = fluidPage(

    tags$head( tags$style( type = "text/css", '
      .irs-line-mid{
        background: #428bca ;
        border: 1px solid #428bca ;
      }
      .irs-line-right{
        background: #428bca ;
      }
      .irs-bar {
        background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
        border-top: 1px solid #CCC ;
        border-bottom: 1px solid #CCC ;
      }
      .irs-bar-edge {
        background: inherit ;
        border: inherit ;
      }

    ')), 

    sliderInput( "slider", label  = "Slider", min = 0, max = 100, value = 50)
  ), server = function(input,output){} 
)

这篇关于如何在值的右侧而不是左侧为滑块着色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！