hi this is Alex from PHP academy.org
with a video tutorial for the New Boston
in this tutorial we're going to be
taking a look at the slider in jQuery UI
what we're going to do is we're going to
implement a simple slider onto the page
and take a look at some of the options
that are available to
us so when the slider is in operation
we're going to create a div underneath
the uh slider that's going to hold the
div and we're going to feedback the
values associated with the slider
so this is useful for things like if
you've looked at clothing websites or
other websites you have um you know such
as just retail websites you might have
sliders that uh allow you to pick a
particular value uh of uh in the range
of a particular value uh for example in
currency you would have uh a slider that
would allow you to only show items
between uh certain amounts of money so
sliders can be implemented in this way
obviously we're not going to be looking
at it in too much detail in this
tutorial by just demonstrating this
slider um effect or slider widget in
jQuery UI but we're just going to take a
look at some of the options available
some of the more useful options so the
first thing we want to do is actually
Implement a slider into our page so I've
included obviously all the necessary
includes uh that we've been using
throughout the tutorial series uh but
the first thing I'm going to do is go
over to style.css and just style some of
the body elements or one of the body
Elements which is the font size and I'm
going to set this to 14
pixels uh I'm also going to be setting
the size of the slider a bit later on
we're going to be fiddling around with
this during the tutorial uh but for now
I'm just going to leave that blank until
we implement the slider so the slider uh
we're going to place into a div element
on our page I'm just going to call this
slider and underneath I'm going to have
an area where we have the slider value
so I'm just going to call this div
slider value so the slider is going to
be implemented in here here and the tech
or the value associated with the slider
will go into this div here so if we go
over to ui. JS which I've included on my
page we can start to actually activate
the slider so we're going to reference
uh using a selector uh this slider div
here so we'll go ahead and write slider
in there and then we just want to write
do slider now this will be this will uh
automatically activate the slider and we
can view it on our
page uh so yeah that should be slider so
let's go ahead and refresh our page and
you can see that we've got a basic
slider uh with no minimum or maximum
value uh and we're also not feeding back
the value to the user so the first thing
we're going to take a look at is
actually feeding back the value so
inside the options we're going to set an
event based on um the uh slider value so
the event name is slide so if we just
write slide in here we can create a
function associated with this so we'll
come down a couple of lines uh let's
just pop this on a separate line Al
together uh down here okay so when we've
actually when we're actually taking uh
the slider and dragging it across this
bar uh anything inside here we want to
uh feed back so this function here is
going to take two uh parameters which is
event and UI now we're not going to be
looking at event but we're going to be
looking at UI uh which is obviously
going to feedback the value of the bar
so I'll show you how do that just now
now we're going to uh select our slider
value uh div and we're going to place
some text inside there we can use HTML
or text uh if you're putting anything
else other than uh thing you know like
you might want to go ahead uh and
Implement a pound sign for
example uh let's just do that to test
and then you want to append on ui. value
now we're going to be changing this a
bit later on uh with the other options
that we're going to give it because uh
value isn't going to work for uh values
in between so you know you you'll
understand a bit later on that we'll
we'll go ahead and change this and
accesses access it uh as an array but
for now what's going to happen is we've
set up the slider uh when we slide we
run this current function and from UI we
place the value of the slider into the
slider value uh with a pound sign on the
front of it so let's go ahead and
refresh uh you can see that as we slide
uh this this is now updating so you can
see that the uh value is increasing uh
by default it's from zero so back to
zero here uh all the way up to 100 now
because we're going to be setting values
a bit later and using these in several
places what I want to do is just go up
here and set a few of these uh values
into variables so I'm going to set uh
the Min value equal to one we want the
value to always start at one and I'm
going to set the max value to uh
400 okay so now what we want to do is
actually Implement these as uh options
so the two options we're looking at here
is min and Max so just under here I can
write
Min and I can go ahead and put Min value
so now Min will be equal to one so the
slider will always start at one and Max
we can use max value and remember this
comma here because this comma separates
uh this uh option value here from this
slide here it would usually look like
that so now that we've set a Min and a
Max we can go ahead and check that you
can see that it will have started at 1
and as we go all the way up it's now at
a maximum value of 400 so that's
essentially how we are setting the
minimum and maximum values of our slider
which is almost uh always going to be
the case uh we might not want zero to
100 we might want a larger value so
assuming this is pound uh we have an
option from 1 pound to
£400 so this could be a slider for
example uh I don't know how much money
do you want to borrow uh or how much
money you know would you like to donate
or anything like that um there is
another option that we can use called
Step which will step at an in
incremental point in the uh slider so
for example if we only wanted multiples
of five uh what we could do is we could
set a step value so I could set the step
value to five for example and what's
going to happen here is uh when we
actually increment it it's going to go
up with a value of five so you'll notice
at the moment that we've uh we're going
up in five because we started at one uh
so we could either change this to zero
or or we could Step at four