CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Slider - Design System - Ubuntu Community Hub</title> <meta name="description" content="Overview A slider provides visual interaction for the user to make a selection from a specified range of values. The user can move the handle to select a value or enter it in the input field. Anatomy Usage When to use &hellip;"> <meta name="generator" content="Discourse 3.3.0 - https://github.com/discourse/discourse version 5bbdc8a813caf55ab3147ac65b5ffafb5e0aab90"> <link rel="icon" type="image/png" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/3X/b/e/be7e4cc6ef7ce95e285337634be009b70561d719_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/3X/f/3/f38b9c7e7decc51bc26320541c441bfa28f99298_2_180x180.png"> <meta name="theme-color" media="all" content="#ffffff"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discourse.ubuntu.com/t/slider/30231" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discourse.ubuntu.com/opensearch.xml" title="Ubuntu Community Hub Search"> <link href="/stylesheets/color_definitions_base__2_4df0b5b6908053d16d0c877a7fa322b583f4db7f.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" class="light-scheme"/> <link href="/stylesheets/desktop_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop" /> <link href="/stylesheets/checklist_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="checklist" /> <link href="/stylesheets/discourse-calendar_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-calendar" /> <link href="/stylesheets/discourse-data-explorer_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-data-explorer" /> <link href="/stylesheets/discourse-details_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="/stylesheets/discourse-gamification_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-gamification" /> <link href="/stylesheets/discourse-lazy-videos_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="/stylesheets/discourse-local-dates_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="/stylesheets/discourse-narrative-bot_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="/stylesheets/discourse-presence_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="/stylesheets/discourse-solved_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="/stylesheets/discourse-templates_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-templates" /> <link href="/stylesheets/markdown-note_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="markdown-note" /> <link href="/stylesheets/poll_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="poll" /> <link href="/stylesheets/spoiler-alert_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="/stylesheets/discourse-calendar_desktop_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-calendar_desktop" /> <link href="/stylesheets/discourse-gamification_desktop_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-gamification_desktop" /> <link href="/stylesheets/poll_desktop_ca0328f3c15e6bdcab41165f40d567681bececef.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="/stylesheets/desktop_theme_51_3618fb4255806e97c9b9e1faa6ccc5d4029f5e5b.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="51" data-theme-name="discotoc"/> <link href="/stylesheets/desktop_theme_50_61357ff8a1e12ac7fcad6b74566fe569f67101d5.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="50" data-theme-name="discourse cookie policy"/> <link href="/stylesheets/desktop_theme_10_9580173011171922db555275ad11ec5b22663414.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="10" data-theme-name="ubuntu discourse"/> <link href="/stylesheets/desktop_theme_2_580b90f56065bcedde51e40cfdc741ff0221c030.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="default"/> <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,300,400" rel="stylesheet"> <style> body { font-family: 'Ubuntu', sans-serif; font-weight: 400; } h1 { font-weight: 100; } </style> <meta name="google-site-verification" content="grFP-bTinUn8jXfEmhZCV8ccDV1IJG2wexOuguu7z_M"> <script defer="" src="/theme-javascripts/f7a737190fe36b9aee0dd740a1ddde023af282d4.js?__ws=discourse.ubuntu.com" data-theme-id="2" nonce="Nq7jdnI1seKQz8jja84uc9Y8P"></script> <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,400,700" rel="stylesheet" type="text/css"> <script defer="" src="/theme-javascripts/5fd6ab93349b47da044725d430da846ba195a894.js?__ws=discourse.ubuntu.com" data-theme-id="15" nonce="Nq7jdnI1seKQz8jja84uc9Y8P"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Slider'" href="https://discourse.ubuntu.com/t/slider/30231.rss" /> <meta property="og:site_name" content="Ubuntu Community Hub" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_1024x555.png" /> <meta property="og:image" content="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_1024x555.png" /> <meta property="og:url" content="https://discourse.ubuntu.com/t/slider/30231" /> <meta name="twitter:url" content="https://discourse.ubuntu.com/t/slider/30231" /> <meta property="og:title" content="Slider" /> <meta name="twitter:title" content="Slider" /> <meta property="og:description" content="Overview A slider provides visual interaction for the user to make a selection from a specified range of values. The user can move the handle to select a value or enter it in the input field. Anatomy Usage When to use To let users select a value from a fixed range To let the user adjust settings or filters When an exact value is not needed, but rather an approximate value. As a visual aid on infographics and/or graphics. When not to use Avoid using a slider if an exact value is necessary,..." /> <meta name="twitter:description" content="Overview A slider provides visual interaction for the user to make a selection from a specified range of values. The user can move the handle to select a value or enter it in the input field. Anatomy Usage When to use To let users select a value from a fixed range To let the user adjust settings or filters When an exact value is not needed, but rather an approximate value. As a visual aid on infographics and/or graphics. When not to use Avoid using a slider if an exact value is necessary,..." /> <meta property="og:article:section" content="Design System" /> <meta property="og:article:section:color" content="0088CC" /> <meta property="og:article:tag" content="component" /> <meta property="og:article:tag" content="design-guidelines" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="1 ❤" /> <meta property="article:published_time" content="2023-03-08T14:28:49+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Slider","mainEntity":{"@type":"Question","name":"Slider","text":"Overview\n\nA slider provides visual interaction for the user to make a selection from a specified range of values. The user can move the handle to select a value or enter it in the input field.\n\nAnatomy\n\n<a class=\"lightbox\" href=\"//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/original/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea.png\" data-download-href=\"/uploads/short-url/gIYbGXm25IQSdNnEjcaNc1lPvm2.png?dl=1\" title=\"anatomy\" rel=\"noopener nofollow ugc\">[anatomy]<\/a>\n\nUsage\n\nWhen to use\n\nTo let users select a value from a fixed range\n\nTo let the user adjus…","upvoteCount":1,"answerCount":0,"datePublished":"2022-08-26T13:51:58.413Z","author":{"@type":"Person","name":"anasereijo1","url":"https://discourse.ubuntu.com/u/anasereijo1"}}}</script> </head> <body class="crawler browser-update"> <nav class="p-navigation--secondary"> <div class="u-fixed-width"> <a class="p-navigation--secondary__banner" href="/"> <h5 class="p-navigation--secondary__logo"> Discourse </h5> </a> </div> </nav> <header> <a href="/"> Ubuntu Community Hub </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/slider/30231">Slider</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/design-system/98" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Design System</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> <div class="topic-category"> <div class='discourse-tags list-tags'> <a href='https://discourse.ubuntu.com/tag/component' class='discourse-tag' rel="tag">component</a>, <a href='https://discourse.ubuntu.com/tag/design-guidelines' class='discourse-tag' rel="tag">design-guidelines</a> </div> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Slider'> <link itemprop='url' href='https://discourse.ubuntu.com/t/slider/30231'> <meta itemprop='datePublished' content='2022-08-26T13:51:58Z'> <meta itemprop='articleSection' content='Design System'> <meta itemprop='keywords' content='component, design-guidelines'> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Canonical Inc.'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://ubuntucommunity.s3.us-east-2.amazonaws.com/original/3X/d/1/d1318a905da7b730a81d0b3f393762cb7d478e38.svg'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.ubuntu.com/u/anasereijo1'><span itemprop='name'>anasereijo1</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discourse.ubuntu.com/t/slider/30231"> <link itemprop="image" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/original/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea.png"> <span class="crawler-post-infos"> <time datetime='2022-08-26T13:51:58Z' class='post-time'> August 26, 2022, 1:51pm </time> <meta itemprop='dateModified' content='2023-03-08T14:28:20Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <h2>Overview</h2> <p>A slider provides visual interaction for the user to make a selection from a specified range of values. The user can move the handle to select a value or enter it in the input field.</p> <h2>Anatomy</h2> <p><div class="lightbox-wrapper"><a class="lightbox" href="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/original/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea.png" data-download-href="/uploads/short-url/gIYbGXm25IQSdNnEjcaNc1lPvm2.png?dl=1" title="anatomy" rel="noopener nofollow ugc"><img src="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_690x374.png" alt="anatomy" data-base62-sha1="gIYbGXm25IQSdNnEjcaNc1lPvm2" width="690" height="374" srcset="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_690x374.png, //ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_1035x561.png 1.5x, //ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_1380x748.png 2x" data-small-upload="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/7/7538293c534022977650b4e72c7dc199b30ae3ea_2_10x10.png"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">anatomy</span><span class="informations">1404×762 25.2 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg></div></a></div></p> <h2>Usage</h2> <h3>When to use</h3> <ul> <li>To let users select a value from a fixed range</li> <li>To let the user adjust settings or filters</li> <li>When an exact value is not needed, but rather an approximate value.</li> <li>As a visual aid on infographics and/or graphics.</li> </ul> <h3>When not to use</h3> <ul> <li>Avoid using a slider if an exact value is necessary, or if using, make the numeric input available.</li> <li>If the range is very wide it will be hard to select a specific value. Again, if using a slider, consider making the numeric input available.</li> <li>Avoid using a slider for ranges that are very small.</li> </ul> <h2>Behaviour</h2> <h3>Interaction</h3> <p>The user can interact with the slider by dragging the handle along the track or by clicking on a specific point in the track. When a numeric input is present, the user can interact with the slider by writing a specific value.</p> <h3>Disabled</h3> <p>When the slider is disabled it will have a transparency of 50% and will not be interactable.</p> <h2>Examples</h2> <h3><a href="http://ubuntu.com" rel="noopener nofollow ugc">ubuntu.com</a></h3> <p><div class="lightbox-wrapper"><a class="lightbox" href="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/original/2X/6/6612561b4cf13545d99eb8bcee01b55cc73b3146.png" data-download-href="/uploads/short-url/eyXZdJmQqcFEEDusdKwvcMayCLY.png?dl=1" title="tco calculator ubuntu" rel="noopener nofollow ugc"><img src="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/6/6612561b4cf13545d99eb8bcee01b55cc73b3146_2_690x173.png" alt="tco calculator ubuntu" data-base62-sha1="eyXZdJmQqcFEEDusdKwvcMayCLY" width="690" height="173" srcset="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/6/6612561b4cf13545d99eb8bcee01b55cc73b3146_2_690x173.png, //ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/6/6612561b4cf13545d99eb8bcee01b55cc73b3146_2_1035x259.png 1.5x, //ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/original/2X/6/6612561b4cf13545d99eb8bcee01b55cc73b3146.png 2x" data-small-upload="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/6/6612561b4cf13545d99eb8bcee01b55cc73b3146_2_10x10.png"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">tco calculator ubuntu</span><span class="informations">1084×272 9.67 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg></div></a></div></p> <p><div class="lightbox-wrapper"><a class="lightbox" href="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/original/2X/1/10921b1cef14753824142e87d1d96ae53ee8dfb7.png" data-download-href="/uploads/short-url/2mAFxsR4ewtt4q8TbvSjFli7uC3.png?dl=1" title="ex uc infographic" rel="noopener nofollow ugc"><img src="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/1/10921b1cef14753824142e87d1d96ae53ee8dfb7_2_690x549.png" alt="ex uc infographic" data-base62-sha1="2mAFxsR4ewtt4q8TbvSjFli7uC3" width="690" height="549" srcset="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/1/10921b1cef14753824142e87d1d96ae53ee8dfb7_2_690x549.png, //ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/1/10921b1cef14753824142e87d1d96ae53ee8dfb7_2_1035x823.png 1.5x, //ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/original/2X/1/10921b1cef14753824142e87d1d96ae53ee8dfb7.png 2x" data-small-upload="//ubuntucommunity.s3.dualstack.us-east-2.amazonaws.com/optimized/2X/1/10921b1cef14753824142e87d1d96ae53ee8dfb7_2_10x10.png"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">ex uc infographic</span><span class="informations">1090×868 27.6 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg></div></a></div></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://discourse.ubuntu.com/t/design-system-website-config/27037">Design system website (config)</a> <meta itemprop='position' content='5'> </div> </div> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://www.ubuntu.com/legal' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://www.ubuntu.com/legal/terms-and-policies/privacy-policy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <footer class="d-footer"> <div class="wrap"> <div class="contents"> <p>© 2024 Canonical Ltd.</p> <div class="d-footer__links"> <a href="https://ubuntu.com/legal">Legal information</a> <a href="https://ubuntu.com/legal/data-privacy" target="_blank">Privacy policy</a> <a href="#" class="js-revoke-cookie-manager">Manage your tracker settings</a> </div> </div> </div> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>