Alterando a imagem da alça do Slider

Eu queria personalizar o controle deslizante JQueryUI, mas não consegui encontrar nenhuma maneira de alterar as imagens da alça deslizante. O JQuery Themeroller também não parece permitir a mudança de imagens do manipulador. Alguém sabe como fazer isso?

Dos documentos da interface do usuário do jQuery :

O plugin jQuery UI Slider usa o jQuery UI CSS Framework para estilizar sua aparência, incluindo colors e texturas de fundo. Recomendamos usar a ferramenta ThemeRoller para criar e baixar temas personalizados fáceis de criar e manter.

Se for necessário um nível mais profundo de personalização, existem classs específicas de widget referenciadas na folha de estilo ui.slider.css que podem ser modificadas. Essas classs são destacadas em negrito abaixo.

Neste caso particular, você quer dar uma olhada no elemento com classname ui-slider-handle .

O elemento de manipulação do controle deslizante padrão possui os seguintes nomes de class aplicados a ele:

  • ui-slider-handle
  • ui-state-default
  • ui-corner-all

Dê uma olhada no CSS correspondente a esses nomes de classs e você provavelmente será capaz de editar tudo o que precisar.

Além disso, sugiro que você instale o Firebug . Este plugin do Firefox vai tornar as tarefas como estas muito mais fáceis para você.

 #demo-frame > div.demo { padding: 10px !important; float: left; } .contentContainer { float: left; width: 400px; height: 500px; overflow: hidden; } .ui-slider-vertical .ui-state-default { border: none; width: 28px; height: 82px; background: transparent url(volume_bar/shattle.png) no-repeat 0 0; } .ui-slider-vertical .ui-slider-handle { left: 0; margin-bottom: -41px; margin-left: 0; } .ui-slider-range, .ui-widget-header, .ui-slider-range-min { background: none; } #slider-vertical, .ui-slider { border: none; width: 50px; height: 50px; background: transparent url(volume_bar/track-bg.png) repeat-y 0 0; } 

alguém perguntou na seção de comentários por exemplo de código css, então aqui está o que eu usei para mudar a imagem de fundo da alça e da barra de rolagem para os meus próprios arquivos de imagem png personalizados. Certifique-se de inserir o css AFTER the jquery ui css na seção de header.