Up next in 10
Angular ngx-slider Example to Build Number Slider Form Input Field in Browser Using TypeScript
Jan 26, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-slider-example-to-build-number-slider-form-input-field-in-browser-using-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
integrate this uh slider input field
0:08
inside angular application so there is a
0:10
specific package here which allows you
0:12
to make this awesome little slider so
0:16
let's suppose in your application if you
0:17
are taking a numeric input from the user
0:21
so the standard HTML slider doesn't look
0:24
good so inside this angular application
0:27
you can use this package which actually
0:31
it's a nice little slider and supports
0:34
As you move the slider you will see the
0:35
value will change you can take in this
0:38
specific example we have taking the
0:41
minimum value is zero maximum value is
0:43
100 and you can as you are moving the
0:46
slider the current value is
0:49
changing so the package name is very
0:53
simple if you go to npmjs.com and just
0:56
search for this package which is ADD
0:58
theate angular
1:02
so just search for it add theate angular
1:04
Dash
1:07
slider SL ngx slider so this is actually
1:11
the package name uh the command is very
1:15
simple I've already installed it so this
1:17
is actually the command and it's almost
1:19
having 67,000 weekly download it's a
1:22
pretty popular package and they do offer
1:25
a live demo as well you can see it's a
1:28
single slider and it also supports range
1:31
slider as
1:32
well and you can customize the look and
1:35
feel as well so minimum price maximum
1:38
price they do offer all these examples
1:40
on their official website but I have
1:43
written a complete step by-step blog
1:45
post you can go to my description link
1:47
where you can find out all the example
1:50
codes so now I will just delete
1:52
everything and start from scratch and
1:55
show to you how to get started so the
1:58
very first thing you need to do you need
2:00
to go to this file here which is app.
2:03
module. TS file and we need to register
2:06
this module so first of all we need to
2:08
add the import statement and we simply
2:11
import this module
2:13
ngx slider module and it will be coming
2:18
from this package which is at theate
2:20
angular Das
2:22
slider and then we Imports add this into
2:25
the Imports
2:28
array so we see simply import this first
2:31
of all and then we add this into the
2:33
import s so now you can close this
2:36
file and uh now you need to move to the
2:40
app. component. HTML file your template
2:43
file so now to use this slider we simply
2:46
say
2:47
ngx
2:50
slider and you will see on the right
2:52
hand side it will look something like
2:56
this you can't move the slider so now to
2:59
move the slider we need to give it a
3:02
value so we need to pass this parameter
3:05
of
3:07
value and here you can provide any value
3:09
let's suppose I say value is
3:13
50 and then you can even provide some
3:18
options I will declare these options in
3:21
the typescript code and let me so we
3:25
have passing two options the current
3:27
value and the options now you need to
3:28
move to this file app. component.
3:31
typescript file and right in this file
3:34
you need to first of
3:37
all declare the value here which will be
3:40
a type of number let me say
3:44
50 and then the options here will be a
3:51
options array here which will be the
3:54
interface of the type it is
3:56
automatically imported you'll see that
3:59
add theate angle slider NG GX slider
4:07
so this needs to be colon right here so
4:11
just inside this you will set the floor
4:13
value which is zero the minimum value
4:16
and the maximum value seal is the 100 so
4:20
now we are on the 50 is the current
4:22
value as you load the page the minimum
4:25
value is zero and the maximum value is
4:27
100 and you can move the slider here
4:30
it's a very simple example let me change
4:32
the maximum value to be
4:34
1,000 and the minimum value to be
4:38
500 and our current value will be 800 so
4:43
now it looks something like this you can
4:45
see that you can customize it
4:48
accordingly your application uh it's a
4:51
very simply to set up it's configuration
4:53
process is very simple you import this
4:55
in the app module. TS file and then you
4:58
can directly use it in inside your HTML
5:01
you control all these options
5:03
accordingly
5:07
so and you can check out their docks
5:10
they do offer all these
5:12
options you can even have vertical
5:14
sliders as well horizontal you can style
5:17
it even more so their dogs are
5:21
tremendous you can check out their dogs
5:23
it's pretty much all these options are
5:25
supported
5:27
so thank you very much guys watching
5:30
this video and uh do visit my website as
5:32
well which is free mediat tools.com uh
5:35
which contains thousands of tools
5:37
regarding audio video and image and I
5:40
will be seeing you guys in the next
5:42
video
#Other