{"id":1395,"date":"2020-12-01T06:54:00","date_gmt":"2020-12-01T06:54:00","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=1395"},"modified":"2023-11-16T02:24:25","modified_gmt":"2023-11-16T02:24:25","slug":"tkinter-spinbox","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-spinbox\/","title":{"rendered":"Tkinter Spinbox"},"content":{"rendered":"\n<p><strong>Summary<\/strong>: in this tutorial, you&#8217;ll learn how to create Tkinter Spinbox widgets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='introduction-to-the-tkinter-spinbox-widget'>Introduction to the Tkinter Spinbox widget <a href=\"#introduction-to-the-tkinter-spinbox-widget\" class=\"anchor\" id=\"introduction-to-the-tkinter-spinbox-widget\" title=\"Anchor for Introduction to the Tkinter Spinbox widget\">#<\/a><\/h2>\n\n\n\n<p>A Spinbox widget allows you to select a value from a set of values, which can include a range of numbers. <\/p>\n\n\n\n<p>A Spinbox has an area for displaying the current value and a pair of arrowheads.<\/p>\n\n\n\n<p>When you click the upward-pointing arrowhead, the Spinbox advances to the next higher value in the sequence. <\/p>\n\n\n\n<p>If the current value reaches the maximum, you can set it to the minimum.<\/p>\n\n\n\n<p>On the other hand, if you click the downward-pointing arrowhead, the Spinbox decreases the current value to the next lower value in the sequence.<\/p>\n\n\n\n<p>If the current value reaches the lowest, you can set it to the maximum.<\/p>\n\n\n\n<p>Additionally, you can directly enter a value into the Spinbox widget as you would with an <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-entry\/\">Entry<\/a> widget.<\/p>\n\n\n\n<p>To create a Spinbox widget, you use the <code>ttk.Spinbox<\/code> constructor:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">ttk<\/span><span class=\"hljs-selector-class\">.Spinbox<\/span>(<span class=\"hljs-selector-tag\">master<\/span>, <span class=\"hljs-selector-tag\">from_<\/span>, <span class=\"hljs-selector-tag\">to<\/span>, <span class=\"hljs-selector-tag\">textvariable<\/span>, <span class=\"hljs-selector-tag\">wrap<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this syntax:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>master<\/code> is the parent widget of the <code>Spinbox<\/code> widget.<\/li>\n\n\n\n<li>The <code>from_<\/code> is the minimum value. Because <code>from<\/code> is the Python keyword, it has to be suffixed with the underscore <code>(_<\/code>) to avoid the compilation error.<\/li>\n\n\n\n<li>The <code>to<\/code> value represents the maximum value.<\/li>\n\n\n\n<li>The <code>textvariable<\/code> specifies a <code>StringVar<\/code> or <code>IntVar<\/code> object of the Tkinter class that holds the current value of the <code>Spinbox<\/code>.<\/li>\n\n\n\n<li>The <code>wrap<\/code> is a Boolean value. If <code>wrap<\/code> is set to <code>True<\/code>, when the current value reaches the maximum value, it&#8217;s set to the lowest value if you click the upward-pointing arrowhead and vice versa. If <code>wrap<\/code> set to <code>False<\/code>, the widget sets the current value to the maximum if you click the downward-pointing arrowhead.<\/li>\n<\/ul>\n\n\n\n<p>Note that the <code>ttk.Spinbox<\/code> has been available since Python 3.7. If you are using a lower version, you need to use the <code>tk.Spinbox<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id='getting-the-current-value'>Getting the current value <a href=\"#getting-the-current-value\" class=\"anchor\" id=\"getting-the-current-value\" title=\"Anchor for Getting the current value\">#<\/a><\/h3>\n\n\n\n<p>To get the current value of the Spinbox, you can access the textvariable. For example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">current_value = tk.StringVar(value=<span class=\"hljs-number\">0<\/span>)\nspin_box = ttk.Spinbox(\n    container,\n    from_=<span class=\"hljs-number\">0<\/span>,\n    to=<span class=\"hljs-number\">30<\/span>,\n    textvariable=current_value,\n    wrap=<span class=\"hljs-keyword\">True<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this example, the <code>current_value<\/code> holds the current value of the Spinbox widget. You can obtain it by calling the get() method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">current_value<\/span><span class=\"hljs-selector-class\">.get<\/span>()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Also, you can use the <code>get()<\/code> method of the Spinbox object:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">spin_box<\/span><span class=\"hljs-selector-class\">.get<\/span>()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id='executing-a-function'>Executing a function <a href=\"#executing-a-function\" class=\"anchor\" id=\"executing-a-function\" title=\"Anchor for Executing a function\">#<\/a><\/h3>\n\n\n\n<p>To execute a function when the value of the Spinbox changes, you can assign that function to the <code>command<\/code> option. For example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">value_changed<\/span><span class=\"hljs-params\">()<\/span>:<\/span>\n    print(current_value.get())\n\ncurrent_value = tk.StringVar(value=<span class=\"hljs-number\">0<\/span>)\n\nspin_box = ttk.Spinbox(\n    container,\n    from_=<span class=\"hljs-number\">0<\/span>,\n    to=<span class=\"hljs-number\">30<\/span>,\n    textvariable=current_value,\n    command=value_changed)    <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In this example, the <code>value_changed<\/code> function will execute automatically whenever the value of the Spinbox changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id='setting-discrete-steps'>Setting discrete steps <a href=\"#setting-discrete-steps\" class=\"anchor\" id=\"setting-discrete-steps\" title=\"Anchor for Setting discrete steps\">#<\/a><\/h3>\n\n\n\n<p>To set a list of discrete steps for a Spinbox, you assign a tuple of discrete numbers to the <code>values<\/code> option like this:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">ttk.Spinbox(\n    ...\n    values=tuple\n    ...\n)    <\/code><\/span><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='tkinter-spinbox-widget-examples'>Tkinter Spinbox widget examples <a href=\"#tkinter-spinbox-widget-examples\" class=\"anchor\" id=\"tkinter-spinbox-widget-examples\" title=\"Anchor for Tkinter Spinbox widget examples\">#<\/a><\/h2>\n\n\n\n<p>Let&#8217;s take some examples of creating a Spinbox widget.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id='1-a-simple-tkinter-spinbox-widget-example'>1) A simple Tkinter Spinbox widget example <a href=\"#1-a-simple-tkinter-spinbox-widget-example\" class=\"anchor\" id=\"1-a-simple-tkinter-spinbox-widget-example\" title=\"Anchor for 1) A simple Tkinter Spinbox widget example\">#<\/a><\/h3>\n\n\n\n<p>The following program illustrates how to use the Spinbox:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\n\n\n<span class=\"hljs-comment\"># root window<\/span>\nroot = tk.Tk()\nroot.geometry(<span class=\"hljs-string\">'300x200'<\/span>)\nroot.resizable(<span class=\"hljs-literal\">False<\/span>, <span class=\"hljs-literal\">False<\/span>)\nroot.title(<span class=\"hljs-string\">'Spinbox Demo'<\/span>)\n\n<span class=\"hljs-comment\"># Spinbox<\/span>\ncurrent_value = tk.StringVar(value=<span class=\"hljs-number\">0<\/span>)\nspin_box = ttk.Spinbox(\n    root,\n    from_=<span class=\"hljs-number\">0<\/span>,\n    to=<span class=\"hljs-number\">30<\/span>,\n    textvariable=current_value,\n    wrap=<span class=\"hljs-literal\">True<\/span>)\n\nspin_box.pack()\n\nroot.mainloop()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"232\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Spinbox-Demo.png\" alt=\"\" class=\"wp-image-1398\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Spinbox-Demo.png 302w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Spinbox-Demo-300x230.png 300w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id='2-tkinter-spinbox-with-discrete-steps'>2) Tkinter Spinbox with discrete steps <a href=\"#2-tkinter-spinbox-with-discrete-steps\" class=\"anchor\" id=\"2-tkinter-spinbox-with-discrete-steps\" title=\"Anchor for 2) Tkinter Spinbox with discrete steps\">#<\/a><\/h3>\n\n\n\n<p>The following example shows how to create a Spinbox with discrete steps:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\n\n\n<span class=\"hljs-comment\"># root window<\/span>\nroot = tk.Tk()\nroot.geometry(<span class=\"hljs-string\">'300x200'<\/span>)\nroot.resizable(<span class=\"hljs-literal\">False<\/span>, <span class=\"hljs-literal\">False<\/span>)\nroot.title(<span class=\"hljs-string\">'Spinbox Demo'<\/span>)\n\n\n<span class=\"hljs-comment\"># spinbox<\/span>\ncurrent_value = tk.StringVar()\nspin_box = ttk.Spinbox(\n    root,\n    from_=<span class=\"hljs-number\">0<\/span>,\n    to=<span class=\"hljs-number\">50<\/span>,\n    values=(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-number\">20<\/span>, <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">50<\/span>),\n    textvariable=current_value,\n    wrap=<span class=\"hljs-literal\">True<\/span>)\n\nspin_box.pack()\n\nroot.mainloop()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"232\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Spinbox-Discrete-Steps.png\" alt=\"\" class=\"wp-image-1397\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Spinbox-Discrete-Steps.png 302w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2020\/12\/Tkinter-Spinbox-Discrete-Steps-300x230.png 300w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id='summary'>Summary <a href=\"#summary\" class=\"anchor\" id=\"summary\" title=\"Anchor for Summary\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>ttk.Spinbox(container, **options)<\/code> to create a Spinbox.<\/li>\n\n\n\n<li>Set <code>wrap=True<\/code> to set the current value to the minimum value when it reaches the maximum value and vice versa.<\/li>\n<\/ul>\n<div class=\"helpful-block-content\" data-title=\"\">\n\t<header>\n\t\t<div class=\"wth-question\">Was this tutorial helpful ?<\/div>\n\t\t<div class=\"wth-thumbs\">\n\t\t\t<button\n\t\t\t\tdata-post=\"1395\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-spinbox\/\"\n\t\t\t\tdata-post-title=\"Tkinter Spinbox\"\n\t\t\t\tdata-response=\"1\"\n\t\t\t\tclass=\"wth-btn-rounded wth-yes-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tclass=\"feather feather-thumbs-up block w-full h-full\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t<button\n\t\t\t\tdata-response=\"0\"\n\t\t\t\tdata-post=\"1395\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-spinbox\/\"\n\t\t\t\tdata-post-title=\"Tkinter Spinbox\"\n\t\t\t\tclass=\"wth-btn-rounded wth-no-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t<div class=\"wth-form hidden\">\n\t\t<div class=\"wth-form-wrapper\">\n\t\t\t<div class=\"wth-title\"><\/div>\n\t\t\t<textarea class=\"wth-message\"><\/textarea>\n\t\t\t<input type=\"button\" name=\"wth-submit\" class=\"wth-btn wth-btn-submit\" id=\"wth-submit\" \/>\n\t\t\t<input type=\"button\" class=\"wth-btn wth-btn-cancel\" value=\"Cancel\" \/>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn how to create Tkinter Spinbox widgets.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1232,"menu_order":23,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1395","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":0,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1395\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1232"}],"wp:attachment":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/media?parent=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}