JQuery Range Slider Handle css não está funcionando?

na minha página jsp com 2 controles deslizantes de intervalo. um é Filtrar por resultado com base em TIME (0-24 h), outro é filter Result baseado em FARE (0,1000). Eu estou usando o controle deslizante jQuery UI. Quero um controle deslizante diferente/separado para cada controle deslizante. eu mudei CSS mas o segundo identificador de controle deslizante substitui o primeiro controle deslizante? Como posso conseguir alças separadas? meu código está aqui [meu código de exemplo] [1]: http://jsfiddle.net/hari034/ypAdf/ . Eu estou usando arquivos query.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, uery.slider.js, query-ui-custom.css.

0

1 Respostas

Você pode estilizá-los de forma diferente usando um embrulho div diferente

html

<table>
<tr>
  <td colspan="2" nowrap="nowrap">
    <div class="timesliderwrap">
       <div id="track6" class="...">
      
     </div>
   </div>
 </td>
</tr>
 <!--Slider For Filter By Fare-->
 <tr valign="top">
    <td colspan="2">
       <div class="faresliderwrap">
          <div id="track7" class="..." style="...">
            
          </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%;}
0
adicionado
JavaScript Brasil OFICIAL
JavaScript Brasil OFICIAL
4 138 dos participantes

Grupo sobre JavaScript do Brasil