Last year I wrote a post on how to use the jQuery UI slider widget for time ranges. I got emailed a question about it two weeks ago and looking back at the code, I realized there were many things that could be done much better. So I decided to rewrite the code as a jQuery UI plugin wrapping the slider widget and put it on GitHub.
Hopefully the code is now cleaner, more efficient, and easier to understand. You can see the demo here
So there were a couple of issues in Part 1:
1) I was using ‘class’ as an element in the options object and threw an error in Safari.
2) The rest of the page besides the gallery looked really uninteresting.
3) A ring is the only shape that we could make.
Luckily, since then I have fixed all of those things plus added a couple more improvements. Obviously it is nice that this will work for people with Safari and the page is not as terrible looking, but the most interesting part is the new shapes.
This weekend I was creating a couple fun ideas with Zoomooz.js, an awesome jQuery plugin for zooming to elements on a page, and was bummed to see that it couldn’t handle 3D transforms yet. After seeing Paul Hayes 3D Sphere and the Morphing Power Cubes, I spent a bunch of time playing around with 3D CSS transforms without coming up with anything too practical. But, after some of my Zoomooz experiments, I thought it would be interesting to see if it would be possible to create a scalable 3D slideshow in the model of the Morphing Power Cubes’ ring setup. Unfortunately this only works in webkit browsers because that is the only one that has 3D transform support as of this moment, so I am using Modernizr to test if your browser can preform the 3D Transforms.
Recently I was trying to create a web form where a user could enter a start time and end time to create a time window for a schedule. However, the easiest solution – having a user enter the times into two text boxes – seemed clunky and annoying to use. I wanted a better solution that was more intuitive so I decided to try using the jQuery UI Slider for a more visual experience with less typing. My goal was to have a slider with two points to represent the beginning and end of a scheduled time range and to display the value of each point as text.
If you haven’t used jQuery UI before, the slider itself is pretty simple to setup:
<div id="slider-range"></div>
<script type="text/javascript">
$("#slider-range").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
step:5
});
</script>