I received this handy answer to my question Is there a way to make the jQuery UI slider start with 0 on top instead of on bottom?

It worked great, however, in IE8, it always shows the slider pointer (better word?) at the bottom, and it is unmovable.

I followed the example from this code on JSfiddle provided by Nick Craver. The example works fine in IE8.

Because I set the options dynamically, I’ll display what should be their values.

var slideMax = $thumbs.innerHeight() - $thumbs.parent().outerHeight();

$(this).slider({
  min: 0,
  max: slideMax,
  value: slideMax,
  stop: function (event, ui) {
      $thumbs.animate({ top: (slideMax - ui.value) * -1}, 500);
  },
  slide: function (event, ui) {
      $thumbs.css({ top: (slideMax - ui.value) * -1 });
  },
  orientation: 'vertical',
  range: 'max'
});

The page in question is here. The JavaScript file is here. It works fine in Firefox.

If you need any more information, please ask.

Thanks again everyone.

Update

I realised I didn’t understand how jQuery UI worked – I thought there was a base library for it, of which the widgets extended. I was including jQuery UI twice. I’ve since fixed this, but the error remains.

Update

As you can see, now offering 200 rep and many thank you‘s to someone that can help me out here!

The weirdest thing, is when I access the site using IE8 on my localhost, the slider works. Online, it doesn’t. The 2 sliders have different images though, so I’m going to make them the same and see if it still happens.

Update

By explicitly giving the items a height via CSS, it has seemed to work!