javascript - Jquery レンジ スライダー ハンドル css が機能していませんか?

Question

私のjspページには2つの範囲スライダーがあります。1 つは TIME(0-24 時間) に基づく結果によるフィルターで、もう 1 つは FARE(0,1000) に基づく結果のフィルターです。jquery UI スライダーを使用しています。スライダーごとに異なる/個別のスライダー ハンドルが必要です。css を変更しましたが、2 番目のスライダー ハンドルが最初のスライダー ハンドルを上書きしますか? どうすれば個別のハンドルを実現できますか? 私のコードはここにあります [私のサンプルコード][1]: http://jsfiddle.net/hari034/ypAdf/ . 私は query.ui.core.js、jquery.ui.widget.js、jquery.ui.mouse.js、uery.slider.js、query-ui-custom.css ファイルを使用しています。

Answer 1

別のdivラッピングを使用してそれらを異なるスタイルにすることができます

html

<table>
<tr>
  <td colspan="2" nowrap="nowrap">
    <div class="timesliderwrap">
       <div id="track6" class="...">
      <a id="track_time" style="..." href="#"></a>
     </div>
   </div>
 </td>
</tr>
 <!--Slider For Filter By Fare-->
 <tr valign="top">
    <td colspan="2">
       <div class="faresliderwrap">
          <div id="track7" class="..." style="...">
            <a id="track_price"  style="left: 0%;" class="..." href="#"></a>
          </div>
       </div>
    </td>
</tr>
</table>

CSS

.timesliderwrap .ui-slider-horizontal-time .ui-state-default {background:url(images/time_indicator1.gif) no-repeat scroll 50% 50%;}

.faresliderwrap .ui-slider-horizontal-price .ui-state-default {background:url(images/price_indicator1.gif) no-repeat scroll 50% 50%;}