w3resource

Customizing Tkinter slider widget with a unique theme

Python Tkinter Custom Widgets and Themes: Exercise-5 with Solution

Write a Python program to build a slider widget using Tkinter with a custom theme, including a customized slider thumb and track.

Sample Solution:

Python Code:

import tkinter as tk

class CustomSlider:
    def __init__(self, master):
        self.master = master
        self.master.title("Custom Slider")
        
        self.canvas = tk.Canvas(self.master, width=400, height=100, bg="white")
        self.canvas.pack(padx=20, pady=20)
        
        self.slider = self.canvas.create_rectangle(50, 40, 350, 60, fill="gray")
        self.thumb = self.canvas.create_rectangle(50, 30, 60, 70, fill="blue", activefill="darkblue")
        
        self.position_label = tk.Label(self.master, text="0%", bg="white", fg="black")
        self.position_label.pack()
        
        self.canvas.bind("", self.move_thumb)
        self.canvas.bind("", self.move_thumb)
        
        self.thumb_x_start = 50
        self.thumb_x_end = 60
        self.thumb_width = self.thumb_x_end - self.thumb_x_start
        self.slider_length = 300
        
    def move_thumb(self, event):
        x = event.x
        if x < self.thumb_x_start:
            x = self.thumb_x_start
        elif x > self.thumb_x_start + self.slider_length:
            x = self.thumb_x_start + self.slider_length
        
        self.canvas.coords(self.thumb, x, 30, x + self.thumb_width, 70)
        
        # Calculate position as a percentage
        position = int(((x - self.thumb_x_start) / self.slider_length) * 100)
        self.position_label.config(text=f"{position}%")

if __name__ == "__main__":
    root = tk.Tk()
    app = CustomSlider(root)
    root.mainloop()

Explanation:

In the exercise above -

  • Create a custom slider using Tkinter.
  • The slider consists of a canvas with a gray track and a blue thumb that can be dragged.
  • Display the current position as a percentage within a label.
  • The thumb can be moved horizontally by clicking and dragging it within the track.
  • Use the canvas's event handling to update the position label as the thumb is moved.
  • The position label's text shows the percentage of the thumb's position within the track.

Output:

Tkinter: Customizing Tkinter slider widget with a unique theme. Part-1

Flowchart:

Flowchart: Customizing Tkinter slider widget with a unique theme.
Flowchart: Customizing Tkinter slider widget with a unique theme.

Python Code Editor:


Previous: Customizing Tkinter radio buttons with distinct styles.
Next: Creating a custom Tabbed interface in Python with Tkinter.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://198.211.115.131/python-exercises/tkinter/python-tkinter-custom-widgets-and-themes-exercise-5.php