Question

I’m looking for a jquery plugin slider that can do something like this:

http://hitmo-studio.com/contact.html#business-query
(please look at the budget slider)

I’m not sure how do you call this type of slider so I couldn’t find anything useful

Answer 1

$('.slider li').click(function(){  
  var liPos = $(this).position().left;
  $('.slibox').stop(1).animate({left:liPos},800);
});

jsBin demo

---

And just with a slight modification you can dynamically change the box width:

$('.slider li').click(function(){      
  var liPos = $(this).position().left;
  var liW = $(this).outerWidth(true);
  $('.slibox').stop(1).animate({ left: liPos, width: liW },600);      
});

jsBin demo2

Now you can learn easily how to upgrade it from this point on (height adjustments…)