javascript - 使用 CSS 谷歌可视化的 slider 颜色配置

Question

我想在控制图中自定义 Google 图表 slider 。 slider 标签的默认设置是列标签的名称； slider 拇指以及最小-最大数字是蓝色的。 我想做三件事: 1)自定义 slider 标签 2)更改 slider 拇指的颜色 3) 改变最小-最大数的颜色

我试图查看文档并尝试了 CSS 类，但没有成功。为了处理标签问题 (1)，我执行以下操作:

     var Slider1 = new google.visualization.ControlWrapper({
               'controlType': 'NumberRangeFilter', 'containerId': 'filter1_div',
               'ui': {'label': 'Productive Area'},...., .....

                }

为了处理问题 2 和 3(CSS 部分)，我执行以下操作:

    .sliderClass.google-visualization-controls-slider-thumb {
        background-color: #14894e;
        border: 1px solid #14894e;
        }
    .sliderClass.google-visualization-controls-rangefilter-thumblabel {
        color: #14894e;
        }

还有什么我应该做的吗？ 谢谢!

Answer 1

假设 sliderClass 是容器 div 上的一个类，您需要做的就是在 .sliderClass 和 .google... 在 CSS 中:

.sliderClass .google-visualization-controls-slider-thumb {
    background-color: #14894e;
    border: 1px solid #14894e;
}
.sliderClass .google-visualization-controls-rangefilter-thumblabel {
    color: #14894e;
}