teaching machines

Making a jQuery slider do something

June 1, 2012 by . Filed under keystrokes, public.

Getting a slider to display was the first step. The end goal is to make the slider scrub through a series of snapshots of a text file. In between, let’s just figure out how to map the tick to a timestep.

jQuery sliders are discrete; they can only be scrubbed to integral positions. Since the text movies they are scrubbing through may be 100, 103.5, 15.7, etc., second longs, I must range map the slider’s tick position (in [0, n], where n is the maximum number of ticks) to the appropriate timestep (in [0, nseconds], where nseconds is the number of seconds in the movie). I do that by finding the proportion of the current tick position to the maximal tick position, and applying that proportion to the number of seconds.

I make the maximal number of ticks a large number to provide a good number of reachable timesteps. If n was only 10, for example, the slider would only let the user access 10 different timesteps. For a 3 hour text movie, that’s not very helpful.

Here’s the script I ended up with:

When embedded in the page, the script produces: