Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Barra de slider al estilo Safari con jQuery

Escrito por: Martín el 21-12-2009 08:27:30

Barra de slider al estilo Safari con jQuery

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: "&nbsp;$" });
    </script>