       @emit 'input-change', {value: @value()}
       @emit 'change', {value: @value()}
 
-    button = select.append('button').attr('type', 'button').class('hx-btn ' + @options.buttonClass)
-    button.append('i').class('hx-icon hx-icon-chevron-down')
-    button.on 'click', 'hx.number-picker', => @decrement()
+    decrementButton = select.append('button').attr('type', 'button').class('hx-btn ' + @options.buttonClass)
+    decrementButton.append('i').class('hx-icon hx-icon-chevron-down')
+
+    addHoldHandler(@options.incrementOnHold, @options.incrementDelay, decrementButton, => @decrement())
+
 
     if @options.max isnt undefined then @max @options.max
     if @options.min isnt undefined then @min @options.min

    container = hx.select(@selector)
    select = container.class('hx-number-picker')

    button = select.append('button').attr('type', 'button').class('hx-btn ' + @options.buttonClass)
    button.append('i').class('hx-icon hx-icon-chevron-up')
    button.on 'click', 'hx.number-picker', => @increment()

    @selectInput = select.append('input')
    @selectInput.attr('type', 'number')

  if max isnt undefined then value = Math.min(value, max)
  if min isnt undefined then value = Math.max(value, min)
  if value isnt oldValue then context.value(value)

addHoldHandler = (incrementOnHold, incrementDelay, selection, incrementFn) ->
  holdStart = undefined
  holdTimer = undefined
  incrementHold = undefined
  if incrementOnHold
    selection.on 'pointerdown', 'hx.number-picker', ->
      holdStart = Date.now()
      fn = -> incrementHold = setInterval((-> incrementFn()), incrementDelay)
      holdTimer = setTimeout(fn, 200)

    selection.on 'pointerup', 'hx.number-picker', ->
      if Date.now() - holdStart < 200
        incrementFn()
      clearTimeout(holdTimer)
      clearInterval(incrementHold)
  else
    selection.on 'click', 'hx.number-picker', -> incrementFn()

class NumberPicker extends hx.EventEmitter
  constructor: (@selector, options) ->
