jquery - bootstrap - slider js
jQuery UI slider labels under slider (4)
Estoy limitado a usar jQuery 1.4.2 y jQuery ui 1.8.5 (esto no es por elección, no me pidas que actualice a las últimas versiones). He creado un control deslizante que muestra el valor actual sobre la barra deslizadora, pero lo que necesito ahora es una forma de rellenar una leyenda debajo de la barra deslizante distanciada igual que el control deslizante (es decir, si el control deslizante tiene 100 píxeles de ancho y hay cinco valores el control deslizante se ajustará cada 20px. En este ejemplo, me gustaría que los valores en la leyenda se coloquen a intervalos de 20px).
Aquí hay un ejemplo de lo que quiero:
Aquí está el jQuery que tengo (asimilado de la página de demostración del deslizador de ui):
//select element with 5 - 20 options
var el = $(''.select'');
//add slider
var slider = $( ''<div class="slider"></div>'' ).insertAfter( el ).slider({
min: 1,
max: el.options.length,
range: ''min'',
value: el.selectedIndex + 1,
slide: function( event, ui ) {
el.selectedIndex = ui.value - 1;
slider.find("a").text(el.options[el.selectedIndex].label);
},
stop: function() {
$(el).change();
}
});
slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
He estado buscando lo mismo y terminé usando el jQuery UI Slider por filamentgroup (Funciona como un amuleto y se ve estable) Creo que con el tiempo se planea fusionarlo en componentes de jQuery UI ...
aquí una referencia al artículo y ejemplo + jsfiddle minimizado lo hice
Control deslizante jQuery UI desde un elemento seleccionado - ahora con soporte ARIA
Este es un ejemplo del artículo de Filament Group Lab
Trabajo minimizado jsfiddle example - Updated and Working
Por cierto, si uno quiere usar un control deslizante más simple (sin rango) todo lo que se necesita hacer es eliminar el segundo elemento de select
Otro buen plugin que hace el trabajo: jslider
Las soluciones publicadas son totalmente viables, pero aquí hay otra solución que no requiere complementos adicionales y produce esto (ver fiddle ):
He aquí cómo hacerlo:
Inicia el control deslizante.
Para cada uno de los valores posibles, agregue un elemento de
label
conposition: absolute
(el control deslizante ya está enposition: relative
, por lo que las etiquetas se colocarán en relación con el control deslizante).Para cada
label
, establezca la propiedadleft
en un porcentaje.
CSS
#slider label {
position: absolute;
width: 20px;
margin-top: 20px;
margin-left: -10px;
text-align: center;
}
JS
// A slider with a step of 1
$("#slider").slider({
value: 4,
min: 1,
max: 7,
step: 1
})
.each(function() {
// Add labels to slider whose values
// are specified by min, max
// Get the options for this slider (specified above)
var opt = $(this).data().uiSlider.options;
// Get the number of possible values
var vals = opt.max - opt.min;
// Position the labels
for (var i = 0; i <= vals; i++) {
// Create a new element and position it with percentages
var el = $(''<label>'' + (i + opt.min) + ''</label>'').css(''left'', (i/vals*100) + ''%'');
// Add the element inside #slider
$("#slider").append(el);
}
});
Para crear una leyenda, necesitamos saber el ancho del control deslizante y el número de elementos y luego dividir uno contra el otro:
//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
options.push(option.label);
}
//how far apart each option label should appear
var width = slider.width() / (options.length - 1);
//after the slider create a containing div with p tags of a set width.
slider.after(''<div class="ui-slider-legend"><p style="width:'' + width + ''px;">'' + options.join(''</p><p style="width:'' + width + ''px;">'') +''</p></div>'');
La etiqueta p necesita tener el estilo ''display: inline-block'' para renderizar correctamente; de lo contrario, cada etiqueta tendrá una línea o las etiquetas se apilarán una junto a la otra.
He creado una publicación que explica el problema y la solución: jQuery UI Slider Legend Under Slider que contiene una demostración en vivo de este funcionamiento.
Una solución más con etiquetas personalizadas y sin tamaño de etiqueta fijo.