NGX-SLIDER in angular 17 standalone template

Hello friends welcome to my channel here Takis in this video let me explore ngx slider so the implementation point of view we can use the angular sound in application with the Standalone template okay so let me go to my application here the first thing is I'm going to install the package so the command is npm install angular slider SL ngx slider okay so I will include this command also in the description okay the installation completed next let me create some components so the first one is for our implementation slider and then I'm creating one more component we can provide the name is home okay so next in our routing side we can map this created components first we mapped this home component and then our slider so next we can run this application up in the running mode so if I'm go to this slider I have some default content in our app component so let me move everything into our home component except this router Outlet we can move everything okay we moved all the changes you know so the text is coming from our Slater component so next in our Slater component point of view let me include one hon tag slider first we can take one basic slider okay and then our TS side I'm declaring one value so we can provide 40 okay and then declaring one object and and the data type is options so here we can provide some basic values okay we can give 200 so let me save this one and then in this import section we can import our ngx slider model okay next in our HTML section so here we can use this ngx slider and then we can bind the property value I'm just applying the two-way binding so here we can use the same value okay and the next thing is the options so let me save this one see the response so the it's starting from zero at the end is 200 so our current value is 40 so the default value we provided okay so in case if you want get the value from this slider so let me provide on label slider values we can bind the same value okay see now okay initially it is showing us the 40 and then if I'm increasing see so this value section also got increased so using this wave we can assign the values to the slider the same way we can get the selected value okay so the next thing is we can use the range slider for doing this range slider let me copy this content okay we can change the name as the range and in this TS point of view actually I can modify this value for the reference purpose I'm just duplicating Val is one and options one so in this stage I'm going to include one more property the value I can give 100 okay so next in our HTML side I'm going to include that high value property also okay here we are getting the error okay it should be caps and in this value also we can change this into value one see now I can move so the same way we can get the values also from and two values I'm going to include two labels okay from and two value one and the two value is nothing but the high value okay so now it is the 42 100 you know 77 to 88 okay okay so it is working fine so these two examples are the horizontal slider so next we can see how to use the vertical slider so it's a kind of property change only but anyway let me create one more entry okay value true and options true and in this options to I'm going to include one more property that is vertical you can say it is true so next in our HTML side um I'm just copied this one vertical slider and the value is value two and there is no high value and in this options option true see now so the slider was there we are unable to see the height difference so what I'm going to do let me include One D tag okay and I'm adding the style height 250 fixel and we can move the slider inside the DU see now this is the way our vertical Slater is working so the next thing is uh we can use the dotted slider so first we can duplicate this one doted slider okay so next TS side so I'm going to include some static values okay so the first one is value three so already we have this value too so it's say again it is a number and then in this option point of view we added this show Tick values true okay then only it will show the tick and additionally so we have this step array okay so let me save this one so in this HTML side we can give value three so the same way options three and there is no high value see so we can see the dotted okay this is the way our dotted slider is working so based on our requirement we can do some customization also so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 887

Keywords: ngx slider in angular, ngx-slider in angular 17, ngx slider in angular 17 standalone template, slider implementation in angular, how to implement slider in angular 17, angular 17, angular 17 standalone template, nihira techiees, how to use ngx-slider in angular 17 standalone template

Id: r0JNk2nOnqw

Length: 10min 2sec (602 seconds)

Published: Wed Feb 28 2024