Creating a jquery UI slider that stops sliding at specific points - html

Question

I've got a jquery ui slider that I'm creating for a new project. I need to know if there's a way to disable sliding after a certain point left and right of the slider 'handles' as I'm greying out left/right of the slider depending on information coming from the database. It's a complex search function basically, and depending on other user-defined choices, the user could either use the whole width of the slider, or parts of it will be greyed out so that they can only select a small part. I've added an image here:
http://demos.frodo.wilson-cooke.co.uk/varley-118345/stackoverflowimage.jpg
So what I've done is positioned a div over the top of the slider and updated the CSS so that it shows the 'block' divs. If all is normal, these are all coloured green, and you can select the whole slider. However, if a range is set, then some of the boxes are greyed out, and you can only select from inside that range (see the green inside the grey boxes - that would be the selectable range, and the white would be the selected range)
However, there's no way to say 'I don't want you to be able to slide past a specific point' - so in this example it would be 'I don't want you to be able to slide past left = 26.6667%' or whatever.
Does anyone have any ideas on how I could achieve this? I've pasted all my code in below.
/* CONTENT
---------------------------------------------------------
-------------------------------------------------------- */
$(document).ready(function(){
var rangenumleft = 0;
var rangenumright = 240;
var curleftval = 0;
wheelDiameterValues = new Array();
wheelDiameterValues[0] = 0;
wheelDiameterValues[1] = 50;
wheelDiameterValues[2] = 75;
wheelDiameterValues[3] = 100;
wheelDiameterValues[4] = 125;
wheelDiameterValues[5] = 150;
wheelDiameterValues[6] = 175;
wheelDiameterValues[7] = 200;
wheelDiameterValues[8] = 225;
wheelDiameterValues[9] = 250;
wheelDiameterValues[10] = 275;
wheelDiameterValues[11] = 300;
wheelDiameterValues[12] = 350;
wheelDiameterValues[13] = 400;
wheelDiameterValues[14] = 450;
wheelDiameterValues[15] = 500;
// when you click the go button on search, this shows the example functionality.
$('#gobutton').click(function() {
var value1 = 40;
var value2 = 100;
lightblocks('#diameter-overslider', value1, value2);
createSlider('#diameter-slider', value1, value2);
});
var initValue1 = 0;
var initValue2 = 150;
createSlider('#diameter-slider', initValue1, initValue2);
createSlider('#load-slider', initValue1, initValue2);
})
function recalcRangeNumbers(slider, numA, numB) {
$(slider).find('#leftrangenumber').html(numA);
$(slider).find('#rightrangenumber').html(numB);
}
function createSlider(slider, value1, value2) {
$(slider).slider({
range: true,
min: 0,
max: 150,
step: 10,
values: [ value1, value2 ],
create: function(event, ui) {
//lightblocks();
var startval = $(this).slider( "values", 0 );
startval = wheelDiameterValues[startval / 10];
var endval = $(this).slider( "values", 1 );
console.log(endval);
endval = wheelDiameterValues[endval / 10]
console.log(endval);
$(this).children('.ui-slider-handle').each(function(index, domEle) {
if(index == 0) {
$(this).addClass('leftHandle');
}
else
{
$(this).addClass('rightHandle');
}
if($(this).hasClass('leftHandle')) {
$(this).append('<div class="leftslider"><p class="range-number" id="leftrangenumber">'+startval+'</p></div>');
}
else if($(this).hasClass('rightHandle')) {
$(this).append('<div class="rightslider"><p class="range-number" id="rightrangenumber">'+endval+'</p></div>');
}
});
},
slide: function( event, ui ) {
var value = ui.value;
var value1 = ui.values[0];
var value2 = ui.values[1];
if(value == value1)
{
direction = 'left';
}
else if(value == value2)
{
direction = 'right';
}
//lightblocks(value, direction);
var startval = ui.values[0];
startval = wheelDiameterValues[startval / 10];
var endval = ui.values[1];
endval = wheelDiameterValues[endval / 10];
recalcRangeNumbers(slider, startval, endval);
//$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
}
function lightblocks(slider, value1, value2) {
/*changeval = value / 10;
if(direction == 'left')
{
for(i = 0; i < changeval; i++){
changevalselector = '#'+i;
$(changevalselector).addClass('block-green');
}
}
else if (direction == 'right')
{
for(i = 15; i >= changeval; i--){
changevalselector = '#'+i;
$(changevalselector).addClass('block-green');
}
}
*/
console.log("slider name="+slider+" value1 = "+value1+" value2 = "+value2);
value1 = value1 / 10;
value2 = value2 / 10;
console.log("slider name="+slider+" value1 = "+value1+" value2 = "+value2);
for(i = 0; i < value1; i++)
{
changevalselector = '#'+i;
$(slider).find(changevalselector).removeClass('block-green');
$(slider).find(changevalselector).addClass('block-grey');
}
for(i = 15; i >= value2; i--)
{
changevalselector = '#'+i;
$(slider).find(changevalselector).removeClass('block-green');
$(slider).find(changevalselector).addClass('block-grey');
}
then HTML
<div class="section" id="bigconfig-spec">
<h2> Specifications <img class="info-icon tooltip" src="images/info-icon.png" alt="information icon" title="This is some product type information" /></h2>
<p class="slider-label"> Wheel Diameter (mm) </p>
<div class="slider" id="diameter-slider"></div>
<div class="overslider" id="diameter-overslider">
<?php for($i = 0; $i <= 14; $i++) { ?>
<div class="sliderblock block-green" id="<?php echo $i; ?>"></div>
<?php } ?>
</div>
<p class="slider-label"> Load Capacity (each, kg) </p>
<div class="slider" id="load-slider"></div>
<div class="overslider" id="load-overslider">
<?php for($i = 0; $i <= 14; $i++) { ?>
<div class="sliderblock block-green" id="<?php echo $i; ?>"></div>
<?php } ?>
</div>
</div>
Anyway, any ideas would be much appreciated, as the only way I can see is to start messing around with the jquery ui code, which is a bit over my head (at the moment, I'm sure I could get my head around it)
But yeah, thanks for any help.
Cheers
Andy

Answer 1

Have you looked into this question:
jquery slider, time picker and reserved times..
The idea is similar and I believe that is what you are looking for.