OpenFaces Demo

OverviewSpinner

Shopping Cart

Product NamePriceQuantityLeft in StockCost
Ink Pen Black$7.99
79$7.99
Leather Blotter$15.49
24$15.49
Ink Cartridge Blue $9.00
9$9.00
Ink Cartridge Black $8.00
12$0.00
Glass Inkwell Red$80.00
9$80.00
Glass Inkwell Blue$80.00
7$0.00
Marker Blue$7.99
8$15.98
Pen Set$29.99
25$59.98
Total Cost:   $188.44

Demonstrated Features

  • Specifying allowed number range - The Spinner component allows to set maximum and minimum value, giving ability to simplify input data validation code and improve user experience. In the order form above users are restricted to increase product quantity over the amount present in stock. Spinner control is also configured to disallow decreasing product quantity below zero.
  • Floating point editing - See the spinners that appear when "Price editing mode" checkbox is selected.
  • Specifying increase/decrease step - See the price editor spinners have a custom step of 0.5.
  • Specifying number conversion settings and pattern - The price editor spinner has a custom format formatting currency.
  • Focused style - Click on one of Spinners controlling product quantity to see custom focused style.
  • Keyboard support - Use the Up/Down keys to increment/decrement the value when the Spinner has an input focus.