jquery - bootstrap - slider js

jQuery UI slider labels under slider

Question

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.

Answer 1

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

Answer 2

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:

1. Inicia el control deslizante.

2. Para cada uno de los valores posibles, agregue un elemento de label con position: absolute (el control deslizante ya está en position: relative , por lo que las etiquetas se colocarán en relación con el control deslizante).

3. Para cada label , establezca la propiedad left 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);
}
});

Answer 3

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.

Answer 4

Una solución más con etiquetas personalizadas y sin tamaño de etiqueta fijo.

JS Bin