Barra de slider al estilo Safari con jQuery

Escrito por: Martín el 21-12-2009 08:27:30 y leído 782 veces

Otro interesante plugin de jQuery para seleccionar valores entre un rango determinado de un modo más gráfico que los 2 clásicos campos del tipo input.

Se trata de una barra donde se pueden arrastrar tanto el valor inicial como el final de fechas, importes y todo lo que se te ocurra.

La demo está muy bien, muy fácil y la documentación también es fácil de utilizar...

Opciones:
* from — [número] límite inferior izquierdo
* to — [número] límite máximo derecho
* step — [número] Valor por el cual el punter se moverá (de 1 en 1, 2 en 2, o lo que quieras)
* round — [número] número de decimales
* heterogeneity — [array] porcentaje de posición actual / valor actual
* dimension — [string] caracteres que muestra después de los valores (ej: m2, euros, etc...)
* limits — [boolean] mostrar o no mostrar los límites
* scale — [array] valores que se muestran por debajo del slider
* skin — [string] para personalizar el color del slider, etc...
* calculate — [function(value)] función para calcular el resultado final.
* onstatechange — [function(value)] esta función se ejecuta cuando el valor cambia.
* callback — [function(value)] esta función se ejecuta al soltar el slider.

Código XHTML

<div class="layout-slider" style="width: 100%">
      Slider <span style="display: inline-block; width: 400px; padding: 0 5px;"><input id="Slider1" type="slider" name="price" value="30000.5;60000" /></span>  in string
    </div>
    <script type="text/javascript" charset="utf-8">
      jQuery("#Slider1").slider({ from: 1000, to: 100000, step: 500, smooth: true, round: 0, dimension: " $" });
    </script>

Categorías: Slider • Barra Desplazamiento • Safari • Jquery • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

barra slider jquery • barra Jquery • jquery barra • estilo barra desplazamiento jquery • barras jquery • slider jquery porcentajes • jquery barra slider • slider barra jquery • barras slider jquery • crear barra slider javascript • slider numeros jquery • barra con jquery • jquery barra fija • scripts barra en jquery • barras slider • slider input jquery • jquery barra inferior • jquery barra derecha • jquery barra color • jquery barra inferiro que se oculta • jquery reemplazar input por slide • barra patrocinadores jquery • jquery rango de valores • barra slider para html • barras jqery • jquery UI slider selector steps calculation • slider estilos • slide de imagenes tipo safari thumbnails • jquery crecer barra • slider jquery datepicker • intervalo de numeros jquery • barra slide con jquery • jquery barra inferior imagenes • barra oculta jquery • cambiar color de barras con jquery • slider jquery barras gratis • jquery barra slider plugin • calendario barras jquery • slider numeros • barra slide scrip • barra carousel jquery • barra con valores con jquery • barra espaciadora jquery • barra omicrono jquery • barra de slider jquery • llenado de barras en jquery • jquery porcentaje slide • barra slider jquery en c# • jquery barra cronologica • barra de desplazamiento con porcentajes jquery • slider barras jquery • jquery barra calculadora • barra slider con jquery • barra slider • barras en jquery • rango barra slide • rango slider • slider jquery porcentaje • personalizar estilo de formulario con jquery • barra slide jquery • slider jquery porcentaje en la barra • barra de slider con jquery • slider value jquery • slider tipo safari • barra de feed con jquery • slider limites jquery • menu estilo safari • barras jquery valores • barra de fechas jquery • barra de llenado jquery • cambiar valor de slider jquery • Slider jQuery para mostrar rangos de fechas • ordenar ol li por orden ID • barra valor jquery • del slider jquery barra • estilos de barra jquery • jquery barr • jquery barra llenado • barra valores jQuery • input rango de valores jquery • barra de valores jquery • slider jquery limite • slider con barra • slider javascript numeros • slider ui cambiar color rango • jquery barra movible porcentaje • jquery barra rango de valores • barra inferior jquery • jquery barra valores • jquey barra valores • BARRA DESPLAZAMIENTO CAMBIA VALORES JQUERY • obtener el valor de un slider de jquery en decimales • slider con numeracion jquery • jquery slider se sale de la barra • jquery slider estilos • barra dezlizadora en html • jquery desplazar derecha slide • barra informativa jquery • barra slider javascript • rango slider con jquery •