Sliders - Tkinter CustomTkinter 10

what's going on guys John here from tk.com and in this video we're going to look at sliders and custom ker all right guys like I said in this video we're going to look at sliders and custom ker but before we get started if you like this video you want to see more like it be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my ker widget quick reference guide book this thing is awesome over 150 pages with all the Kinder widget attributes grab your free copy today just head over to tent.com widget dbook enter your email address and I'll send that right out to you and while you're there think about membership ink.com you get all my ker courses and all my future courses for one low price use coupon code YouTube to get 30% off membership if you're interested okay like I said in this video we're going to look at the slider in custom kter and this is the slider it slides it goes left it goes right it can go up it go down and we could change the color and do all kinds of things with it so that's what we're going to look at in this video so let's head over to rodom using the Sublime Text Editor and they get bash terminal as always and as always you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other videos in this custom kter Series so check that out if you haven't so far so I've got a file I'm calling it ctk slider it's our basic custom kter starter code that we always have let's come down here and let's just create our slider so let's call this myor slider and this is going to be a customer. ctk slider and we want to put it in root there are lots of different things we could do with this but we almost always want to set a from underscore and we'll start at zero and the reason why we use an underscore with from is because from is a python keyword so they have to change it around a little bit so they put a little underscore after it so from zero it starts at zero and then two let's have it go to 100 and that's really all we need now you're also going to want to give this a command so that whenever you slide it you can actually do something with the return value and it's going to return a number basically a decimal so this give this a command of sliding I don't know and we'll have to create this so let's just come up here real quick and and let's say function and then let's define sliding and this will take some value that gets passed from the slider for now let's just pass okay so that's really all we need right out of the box so let's go myor slider. pack and let's give this a pad y of like 40 and up here I called this my slide we want to call this my slider okay so let's go ahead and save this and just run it see what this is head back over to our terminal um and my CT ker.com directory and let's run Python ctk slider. and when we do we get this slider you can see it's started right in the middle here by default we could go down we can go up it's not actually doing anything when we do that but we'll look at that in just a second now you'll notice like I said it started out right in the middle you can Define exactly where you want it to start if you want it to start at zero 100 whatever to do that super easy just come back over here and let's define starting point and to do that we just go myor slider. set and then just pass in any number so if we want to start it at zero you just put in a zero there so if we head back over here run this guy again now you'll notice it's started over here at zero or what we think is zero the left side right so okay that's cool now how do we get it to actually do something like okay we could slide this around but it's not really doing anything so what can we do here so super simple head back over to recode and up here anytime the slides it's calling this function and it's passing the value now the value is going to be a decimal so we can let's come down here and create a label real quick and let's call this minor score label and this is going to equal a custom tkinter.ttk label and we want to put it in root we want the text to equal nothing for now let's give this a font of say helvetica and like a size 18 so it's nice and big and then let's myor label. pack this guy and give it a pad y of say 20 push down the screen a little bit so we've got this myor label here now let's update that label with whatever value is currently being output on the slider so let's go myor label. configure and let's set the text equal to whatever this value is and like I said this value is getting passed by the slider widget automatically whenever we move it now I called it value you could call it X if you want call it anything you want but it's sending the value so I think we'll call it value and that's what the documentation says anyway so okay that looks good let's go ahead and save this and run it and now when we grab this thing boom you'll see 12.0 17 and this is a decimal and for me I don't love that it goes all the way up to 100 which is weird it should be 100.0 right but all right whatever I maybe you want that granular amount of you know decimal to me I just want want the actual integer so we could quickly change this we could just call the int function and wrap that value in that if we save that and run it now 28 29 50 it's a whole number it's an integer and I kind of like that a little better so all right that looks cool we're passing the value what if you just want to get what this is if somebody's drug it around and then they stopped and maybe later on you want to know oh what what was that number again right you can get it anytime you want get we get a lot of things like entry boxes and things like that let's come down here to our original label and let's just set that text to myor slider. getet and so you can call myor slider. getet anytime you want and it will return whatever the slider currently is so if we save this and run it just by default it's going to be zero or 0.0 zero I guess and that doesn't interfere with the sliding mechanism very cool so really that's kind of all there is to it uh functionality wise now we can customize this thing in a bunch of different ways first off we can set the orientation as well to say vertical it's horizontal by default but we can set it to Vertical so let's go ahead and save this and run it whoops uh we need a we need a comma here we go there we go run this guy again and now it goes up and down you can't see the label because it's off the screen there but uh if you like that that's cool now like I said by default it's horizontal or you can just call it as horizontal like that so that's cool we can set the number of steps so by default it just goes by ones every time you drag it goes from zero to one to two to three to four you can set the steps to anything you want so if you wanted it to go from 0 to 10 to 20 to 30 to 40 whatever you can set the number of steps when we do that if we go one see it bopped right to 10 if I move it again boom Bops to 20 30 40 50 that's kind of cool all the way up to 100 very interesting and as far as functionality that's pretty much it now the rest of the customization is very much like the rest of the widgets in custom kter you could set the width of you know anything you want let's say 400 you could set the height to I don't know let's say 50 it's going to make this very big sort of fat and the width really is the width of this sort of slidy area here and I guess the button as well but very interesting so that's cool we can change the Border width and I find this to be a little confusing so let's change this to 20 if we run this the whole thing got skinnier which is kind of weird so they play around with these numbers um if you change this to uh 90 or something or let's just go 100 you can see now it's I'm not even really sure what's going on here like it's hard to visualize what this is so I tend to not really use that um so I'm just going to take that out because that's annoying but that's border width we can change all the different colors so let's go FG color and let's set that equal to red or something fairly obnoxious come back over here run this guy and this refers basically to the slider the unslidable it this has been slid I guess I don't know and the rest of it is red so that's cool we can change the progress color I guess it's not the slid color it's the progress color uh so let's set that equal to I don't know green or something fairly ugly uh run this guy and then when we slide it the part that's slid is the progress color that's now green so that's cool we can change the button color let's let's set that equal to say yellow so the button obviously is the little slider Tabby thing that you're going to pull right and you'll notice it's yellow when we hover over it it changes to a different color that's the hover color you'll never guess how we change that it's the button underscore hover underscore color of course and that let's say orange or something very very ugly so now when we hover it turns orange if we go away it goes back to the regular color super easy and really that's pretty much it we can change the state of this thing to say disabled when we do that the whole thing just is locked I'm hovering nothing is happening I'm trying to drag it nothing is happening it's just been disabled likewise you can reenable it by setting that to normal so I'll just leave that at normal and then the last thing we could do is set the hover to false if we go ahead and save this it's going to do just what it sounds like now when we hover over it it doesn't change to Orange the thing still works fine but now it doesn't change color when you hover maybe you like that maybe it fits your design whatever uh very cool so that's the slider super easy not a whole lot of bells and whistles to it but you really don't need a whole lot of bells and whistles for your slider it does everything you would want it to do and just that easy so that's all for this video if you liked it be sure to smash like button below subscribe to the channel give me a thumb up for the YouTube algorithm and be sure to grab your totally free PDF copy of my ker widget quick reference guide book this thing is awesome over 150 pages with all the kter widget attributes grab your free copy today just head over to tk.com widget-based

Channel: Tkinter․com

Views: 6,268

Keywords: tkinter, customtkinter slider, slider customtkinter, customtkinter slider value, customtkinter slider start position, customtkinter slider color, tkinter.com, john elder, john elder tkinter, john elder tkinter tutorial, john elder customtkinter, john elder customtkinter tutorial, tkinter slider, python gui

Id: SiOVaR2ve_M

Length: 11min 6sec (666 seconds)

Published: Tue Oct 17 2023