UI Slider

Here you will find various resources to help you create sliders in Gideros Studio.

note:You may have to provide your own assets (fonts, gfx, …)

Slider

-- UI Slider class
Slider = Core.class(Sprite)

function Slider:init(slit, knob)
	self.slit = slit
	self.width = self.slit:getWidth()
	self:addChild(self.slit)

	self.knob = knob
	self:addChild(self.knob)

	self.value = 0
	self.isFocus = false

	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
	self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
	self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
end

function Slider:onMouseDown(event)
	if self.knob:hitTestPoint(event.x, event.y) then
		self.isFocus = true
		self.x0 = event.x
		event:stopPropagation()
	end
end

function Slider:onMouseMove(event)
	if self.isFocus then
		local dx = event.x - self.x0
		self.knob:setX(self.knob:getX() + dx)
		self.x0 = event.x
		
		-- keep the knob position within its range
		if self.knob:getX() < 0 then self.knob:setX(0) end
		if self.knob:getX() > self.width then self.knob:setX(self.width) end
		self.value = math.floor(100 * self.knob:getX() / self.width)
		event:stopPropagation()
	end
end

function Slider:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false
		event:stopPropagation()
	end
end

function Slider:setValue(value)
	local value = math.floor(value)
	-- check within a range of [0, 100]
	if value < 0 then value = 0 end
	if value > 100 then value = 100 end
	posX = self.width * value / 100
	self.knob:setPosition(posX, 0)
	self.value = value
end

function Slider:getValue()
	return self.value
end

---- USAGE
--local slit = Bitmap.new(Texture.new("Images/slit.png"))
--slit:setAnchorPoint(0, 0.5)
--local knob = Bitmap.new(Texture.new("Images/knob.png"))
--knob:setAnchorPoint(0.5, 0.5)
--local myslider = Slider.new(slit, knob)
--stage:addChild(myslider)
--slider:setValue(75)

Slider 2

Slider2 = Core.class(Sprite)

function Slider2:init(xparams)
	local params = xparams or {}
	params.maximum = xparams.maximum or 100
	params.slitcolor = xparams.slitcolor or 0x0
	params.slitalpha = xparams.slitalpha or 1
	params.slitw = xparams.slitw or 64
	params.slith = xparams.slith or 64
	params.knobcolor = xparams.knobcolor or 0xffffff
	params.knobalpha = xparams.knobalpha or 1
	params.knobw = xparams.knobw or 32
	params.knobh = xparams.knobh or 32
	--
	local slit = Pixel.new(params.slitcolor, params.slitalpha, params.slitw, params.slith)
	slit:setAnchorPoint(0, 0.5)
	local knob = Pixel.new(params.knobcolor, params.knobalpha, params.knobw, params.knobh)
	knob:setAnchorPoint(0.5, 0.5)
	--
	self.width = slit:getWidth()
	self:addChild(slit)
	self.knob = knob
	self:addChild(self.knob)
	--
	self.maximum = params.maximum
	self.steps = 100 / self.maximum
	self.value = 0
	self.isFocus = false
	--
	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
	self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
	self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
end

function Slider2:onMouseDown(event)
	if self.knob:hitTestPoint(event.x, event.y) then
		self.isFocus = true
		self.x0 = event.x
		event:stopPropagation()
	end
end

function Slider2:onMouseMove(event)
	if self.isFocus then
		local dx = event.x - self.x0
		self.knob:setX(self.knob:getX() + dx)
		self.x0 = event.x
		
		-- keep the knob position within its range
		if self.knob:getX() < 0 then self.knob:setX(0) end
		if self.knob:getX() > self.width then self.knob:setX(self.width) end
		self.value = self.maximum * self.knob:getX() / self.width // 1

		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)

		event:stopPropagation()
	end
end

function Slider2:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false

		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)

		event:stopPropagation()
	end
end

function Slider2:setValue(value)
	local value = math.floor(value)
	-- check within a range of [0, 100]
	if value < 0 then value = 0 end
	if value > 100 then value = 100 end
	posX = self.width * value / 100 * self.steps
	self.knob:setPosition(posX, 0)
	self.value = value
end

--[[
---- usage
-- bg
application:setBackgroundColor(0x333333)
-- a volume slider
local volumeslider = Slider2.new({
	maximum=200,
	slitcolor=0x222222, slitalpha=1, slitw=512 - 64 * 2, slith=32,
	knobcolor=0x00ffff, knobalpha=1, knobw=40, knobh=48,
})
volumeslider:setValue(33)
tfsfxvolume = TextField.new(nil, "VOLUME: "..volumeslider.value)
tfsfxvolume:setScale(4)
tfsfxvolume:setTextColor(0xffffff)
-- positions
tfsfxvolume:setPosition(64, 128)
volumeslider:setPosition(64, 196)
-- order
stage:addChild(tfsfxvolume)
stage:addChild(volumeslider)
-- listeners
function onVolumeValueChanging(ev) tfsfxvolume:setText("VOLUME: "..ev.value) end
function onVolumeValueChanged(ev)
	tfsfxvolume:setText("VOLUME: "..ev.value)
	g_sfxvolume = ev.value
end
volumeslider:addEventListener("value_changed", onVolumeValueChanged)
volumeslider:addEventListener("value_changed", onVolumeValueChanging)
]]