I built a working slider. Add the class "slider" to your number field. Put the following code in document ready. This is sort of hacky and may have bugs in scenarios I wasn't trying to support, but it mostly works.
$(".slider .ginput_container :input").hide();
$(".slider .ginput_container .instruction").hide();
$("<div class='slider-value'></div>").insertBefore(".slider .ginput_container :input");
$("<div class='slider-display'></div>").insertAfter(".slider .ginput_container :input");
$(".slider-display").slider({
range: "min",
value: 1,
min: 1,
max: 1000,
create: function( event, ui ) {
var value = $(this).prev(':input').val();
$(this).siblings('.slider-value').html( value );
var min = parseInt($(this).next('.instruction').find('strong').eq(0).html());
var max = parseInt($(this).next('.instruction').find('strong').eq(1).html());
$(this).slider("option", "min", min );
$(this).slider("option", "max", max);
$(this).slider("option", "value", value);
},
slide: function( event, ui ) {
var value = $(this).slider( "value" );
$(this).prev(':input').val(value);
$(this).prev(':input').trigger("change");
$(this).siblings('.slider-value').html( value);
}
});
It grabs the supported range from the instruction field. It's definitely not ideal but I didn't see any other place where that info is available in the DOM.
Posted 11 years ago on Thursday May 2, 2013 |
Permalink