Jquery Range Slider Handle css no está funcionando?

en mi página jsp con 2 controles deslizantes de rango. uno es Filtrar por Resultado basado en TIEMPO (0-24 h), otro es Resultado de filtro basado en FARE (0,1000). Estoy usando el deslizador de la interfaz de usuario jquery. Quiero un control deslizante diferente/separado para cada control deslizante. Cambié CSS pero el segundo control deslizante sobrescribe el primer control deslizante. ¿cómo puedo lograr mangos separados? mi código está aquí [mi código de muestra] [1]: http://jsfiddle.net/hari034/ypAdf/ . Estoy usando query.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, uery.slider.js, archivos query-ui-custom.css.

0

1 Respuestas

Puede diseñarlos de manera diferente con un envoltorio 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
agregado
JavaScript - Comunidad española
JavaScript - Comunidad española
4 de los participantes

Enlace para invitaciones: https://t.me/joinchat/B2gdShb3y7ojLekmhtDxIw En este grupo hablamos de JavaScript. Partner: es.switch-case.com