Question

我正在使用JQuery Slider，我需要自定义其css样式，这是在JQuery UI CSS Framework中。我希望小部件有一个背景颜色白色（默认情况下是这样），我给ui-slider-range一个30％的高度作为一条细线和一个0.4em的顶部就在小部件内容的中间部分。我需要那条线为红色，所以我给了ui-slider-range红色。但我的问题是我不知道如何使未选择范围的颜色变为灰色。我一直在尝试，但我还没弄清楚哪个是我必须修改的类名来实现。

这些是影响滑块

的类名

.ui-slider {
   position: relative;
   text-align: left;
   width: 400px;
 }
.ui-slider .ui-slider-handle {
   position: absolute;
   z-index: 2;
   width: 1.2em;
   height: 1.2em;
   cursor: default;
  -ms-touch-action: none;
   touch-action: none;
 }
.ui-slider .ui-slider-range {
   position: absolute;
   z-index: 1;
   font-size: .7em;
   display: block;
   border: 0;
   background-position: 0 0;
 }

 /* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
   filter: inherit;
 }

.ui-slider-horizontal {
   height: .8em;
 }
.ui-slider-horizontal .ui-slider-handle {
   top: -.3em;
   margin-left: -.6em;
 }
.ui-slider-horizontal .ui-slider-range {
   top: 0.4em;
   height: 30%;
   background-color: red;
 }
.ui-slider-horizontal .ui-slider-range-min {
   left: 0;
 }
.ui-slider-horizontal .ui-slider-range-max {
   right: 0;
 }
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
   font-family: Verdana,Arial,sans-serif;
   font-size: 1em;
 }
.ui-widget-content {
   border: 1px solid;
   background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
   color: #222222;
 }
.ui-widget-content a {
   color: #222222;
 }
.ui-widget-header {
   border: 1px solid #aaaaaa;
   background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
   color: #222222;
   font-weight: bold;
 }
.ui-widget-header a {
    color: #222222;
 }

编辑：

这是html代码

<body>
  <p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>

  <div id="slider-range"></div>
</body>

这是javascript代码

<script>
  $(function() {
    $( "#slider-range" ).slider({
      animate: "fast",
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    var animate = $( "#slider-range" ).slider( "option", "animate" );
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
</script>

将颜色添加到未选定的范围

0 个答案: