Swapping a Select Box for a Slider

Alas, my Mac is still in for repair, leaving me with my iPad to continue development work. Earlier this week, I posted a prototype of a loan calculator where the inputs had been switched out with sliders. This works great for the inputs that take numerical values, ie. loan amount, interest rate, and loan term. These components can be applied to my Responsive Mortgage Calculator plugin almost as is. The down payment field will take a little more thought – this is currently a numerical value but could also be a percentage, and what happens if the numerical value is higher that the total amount… But I digress.

The remaining piece of the puzzle for the loan calculator is in the selection of the payment period. I could just leave this as a select input, and that is certainly an option, but I would lack cohesion with the rest of the interface. What I’ve done is to create a slider input that translates the select options into discreet slider settings. The slider functions pretty much the same as the regular input sliders – you can touch it and move it, and it will slide smoothly. The selected option changes as the slider moves from one option range to another option range.

At present, I’ve only tested it on an iPad, so it only works for touch screens. You can try the slider on CodePen to see how it works.

Prototyping a Slider Interface for a Loan Calculator

My computer went down last week with the Apple MPB GPU failure. This has made things a little challenging for development. My iPad has suddenly become my development machine. This is forcing me to work on smaller projects, getting ideas fleshed out for the upcoming Responsive Mortgage Calculator Pro release, and starting the prototyping process for a slider interface add on.

Check out the Protoype