首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >切换滑块输入颜色而不闪烁

切换滑块输入颜色而不闪烁
EN

Stack Overflow用户
提问于 2018-05-26 15:52:17
回答 2查看 303关注 0票数 1

我正在尝试使一个闪亮的应用程序切换滑块输入的颜色在某些条件下随着更新。下面的例子演示了我正在尝试做的事情的一个不完美的版本。它只有一个滑块输入和两个按钮。这两个按钮使用updateSliderInput函数来更改滑块的一些属性,然后我使用shinyjs向滑块添加一个类来改变它的颜色。

ui.R

代码语言:javascript
运行
复制
library(shiny)
library(shinyjs)

shinyUI(fluidPage(
    includeCSS('www/style.css'),
    useShinyjs(),
    sliderInput("slider",
                "A slider",
                min = 1,
                max = 50,
                value = 30),
    actionButton('type1','type 1'),
    actionButton('type2','type 2')

))

。R server.R

代码语言:javascript
运行
复制
library(shiny)
library(shinyjs)

shinyServer(function(input, output,session) {

    observeEvent(input$type1,{
        updateSliderInput(session,
                          inputId = 'slider',
                          min = 0,
                          value = 10,
                          max = 20)
        delay(3,{
            removeClass(selector = '.js-irs-0', class = 'type2')
            addClass(selector = '.js-irs-0', class = 'type1')
        })
    })

    observeEvent(input$type2,{
        updateSliderInput(session,
                          inputId = 'slider',
                          min = 0,
                          value = 20,
                          max = 40)
        delay(3,{
            removeClass(selector = '.js-irs-0', class = 'type1')
            addClass(selector = '.js-irs-0', class = 'type2')
        })
    })

})

(www/css文件在问题的末尾,因为它的内容不太相关)

在快速系统中,结果看起来很好,因为行的执行之间几乎没有延迟。但是,如果我切换到一台速度较慢的机器,当在type1type2提供的颜色之间切换时,您可以看到滑块闪烁回到原来的蓝色。这是因为updateSliderInput在应用自己的更新时删除了手动添加到滑块中的任何类。我正在寻找一种防止这种情况发生的方法。我怀疑可以使用session$sendCustomMessagesession$sendInputMessage来完成,但到目前为止我还没有成功。

注意:delay函数是必需的,因为如果没有它,updateSliderInput将覆盖addClass执行的更改。removeClass不是必须的,因为updateSliderInput已经删除了手动添加的类,但我保留了这一行,因为修复可能会阻止updateSliderInput这样做。

正如承诺的那样:

www/style.css

代码语言:javascript
运行
复制
.type1 .irs-bar {
border-top-color: #8B1A1A;
border-bottom-color: #8B1A1A;
}

.type1 .irs-bar-edge {
border-color: #8B1A1A;
}

.type1 .irs-single, .type1 .irs-bar-edge, .type1 .irs-bar {
background: #8B1A1A;
}

.type2 .irs-bar {
border-top-color: #6959CD;
border-bottom-color: #6959CD;
}

.type2 .irs-bar-edge {
border-color: #6959CD;
}

.type2 .irs-single, .type2 .irs-bar-edge, .type2 .irs-bar {
background: #6959CD;
}
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50540595

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档