qml is great tools in qt in my tutorial qt Qt Style sheets Tutorial I’m using Css to create prototype for application to windows “form login” and i follow some steps to do that and finally I did it now I’ll do different thing in qml I will make special specs to make slider follow my steps and we will make with us amazing component let’s start :
in the beginning
Step 1: open Qt Creator and in file new project, in “Qt Quick Project” choose “Qt Quick UI” and name it slide.
Step 2: open slide.qml and make it empty because we want make it with own.
Step 3: now we will make this.
before it type the parent window and we will back to it later this the code
this will be the parent window lets back to our slide first we will make two rectangle inside each other first own it the outer one I’ll make it round by type radius : 13 and the insider make it the radius : 16 so it will same like in the image second the secret in the slider to appear like it has edges and the ball in side it it’s the color and gradient the inner rectangle will be color and i put it’s color : “#ffffff” with opacity: 0.740 and border.color: “#807d76” the outer will make by color or gradient as you like here i use color but my self when i used gradient it’s appear amazing so i let color: “#ecdddd” and or what you like and to the both I’ll make the smooth : true and clip : true so it appear like in the image the code for outer and inner rectangle is :
Step 4: we will make the ball in the slider.
we make make the ball with gradient to same like a ball first the radius to the ball is radius : 40 and the opacity : 0.260 and I’ll make the smooth : true , I’ll use two position in gradient position :0 the color will be color: “#f5eaea” and position : 1 the color will be color: “#dd0b0b” finally I’ll put border.color: “#8b7c7c” so it will be like what you see now and the code for ball will be:
Step 5: back to the parent window I’ll make it appear beautiful just for fun I’ll put gradient in it , I will let you try it this is the code for the parent window .
Final step : I will use drag in qt system to enable to drag the ball in the slider horizontal in the the rectangle inner rectangle so I’ll use MouseArea in qml and in it put the anchors.fill to parent the windows parent and in the drag.target to the ball and drag.axis will be the X axis and maxdrag and mindrag to put it in the range between the inner rectangle; this is the code for mouse area.
So the final result :
The complete code :
Now you can drag the slider and make beautiful element and prototype to your application thanks again to your time any mistake i did please tell me or send to me and accept my apologies to didn’t type anything for long time thank you again.