ui = ui or {}

local function sliderTouch(self, event)
    if event.phase == 'began' then
        display.getCurrentStage():setFocus(self)
    elseif event.phase == 'ended' or event.phase == 'cancelled' then
        display.getCurrentStage():setFocus()
    end
    local x, y = self:contentToLocal(event.x, event.y)
    self.Thumb.x = math.min(math.max(x, self.Bar.width / -2), self.Bar.width / 2)
    local oldValue = self.Value
    if event.phase ~= "cancelled" then
        self.Value = self.Thumb.x / self.Bar.width + 0.5
    end
    self:dispatchEvent{name='Slider', target=self; value=self.Value, previous=oldValue, user=true, final=event.phase == 'ended' or event.phase == 'cancelled'}
    return true
end

local self = function(parent, width, height)
    local self = display.newGroup(); parent:insert(self)
    local barHeight = height * 0.6
    local bar = display.newRoundedRect(self, width / -2, barHeight / -2, width, barHeight, barHeight / 2) do
        bar:setStrokeColor(0, 0, 0)
        bar.strokeWidth = barHeight / 16
        bar:setFillColor(.827 * 127, .694 * 127, .286 * 127)
    end self.Bar = bar
    local thumb = display.newCircle(self, 0, 0, height / 2) do
        thumb:setStrokeColor(0, 0, 0)
        thumb.strokeWidth = height / 10
        thumb:setFillColor(.827 * 255, .694 * 255, .286 * 255)
    end self.Thumb = thumb
    self.touch = sliderTouch
    self:addEventListener('touch', self)
    self.Value = 0.5
    function self:SetValue(value)
        self.Value, value = value, self.Value
        self.Thumb.x = (self.Value - 0.5) * self.Bar.width
        self:dispatchEvent{name='Slider', target=self; value=self.Value, previous=value, user=false, final=true}
    end
    return self
end

ui.slider = self

return self