{"id":20713,"date":"2014-06-06T13:01:24","date_gmt":"2014-06-06T05:01:24","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20713"},"modified":"2024-07-19T03:18:22","modified_gmt":"2024-07-18T19:18:22","slug":"html5-range-slider-style","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/","title":{"rendered":"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance"},"content":{"rendered":"<p>The <strong>range<\/strong> input type is a new addition in HTML5, allowing users to input numbers within a specified range using a <strong>slider control<\/strong>. This intuitive user interface, commonly found in applications, lets users slide the handle bar left or right to select a number within the range.<\/p>\n<p>However, each browser renders this input type slightly differently, which may not meet some designers\u2019 preferences. In this article, we will show you <strong>how to style the range slider for a more unified design<\/strong>. If you\u2019re ready, let\u2019s get started.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/\" class=\"ref-block__link\" title=\"Read More: Creating & Styling Progress Bar With HTML5\" rel=\"bookmark\"><span class=\"screen-reader-text\">Creating & Styling Progress Bar With HTML5<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-progress-bar.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16523 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html5-progress-bar.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Creating & Styling Progress Bar With HTML5<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tHTML5 brought us the progress bar element, making it easier to visually represent the completion status of tasks...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Chrome, Safari, and Opera<\/h2>\n<p>Safari and Opera are Webkit-based browsers. Although Chrome has adopted its own engine, Blink, it still inherits several code bases from Webkit. This provides an easy way to style any input type, including <code>range<\/code>. To start, we can select the input with the attribute selector and remove the native Webkit\/Chrome styles by setting the <code>-webkit-appearance<\/code> to <code>none<\/code>.<\/p>\n<pre>\r\ninput[type=range] {\r\n  -webkit-appearance: none;\r\n}\r\n<\/pre>\n<p>From here, we can add styles such as border, background color, and rounded borders.<\/p>\n<pre>\r\ninput[type=range] {\r\n  -webkit-appearance: none;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  height: 7px;\r\n  border: 1px solid #bdc3c7;\r\n  background-color: #fff; \r\n}\r\n<\/pre>\n<p>As shown below, the handle bar is the only part of the input that remains unaffected by the above code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg\" height=\"180\" width=\"500\" alt=\"Unstyled handle bar\"><\/figure>\n<p>To apply styles to it, we use the Webkit proprietary pseudo-element selector <code>::-webkit-slider-thumb<\/code> and remove the native styles with <code>-webkit-appearance<\/code> as shown below.<\/p>\n<pre>\r\ninput[type='range']::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  background-color: #ecf0f1;\r\n  border: 1px solid #bdc3c7;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n}\r\n<\/pre>\n<p>That\u2019s how we style the <code>range<\/code> input type in a Webkit browser. The style should take effect in Chrome, Safari, and the latest version of Opera. However, it will not affect Firefox and Internet Explorer as they use different engines. But don\u2019t worry, we have workarounds for those as well.<\/p>\n<h2>Firefox<\/h2>\n<p>Adding styles directly with the attribute selector <code>input[type='range']<\/code> won\u2019t change the native styles of the input in Firefox. Instead, we use Firefox\u2019s proprietary pseudo-element selectors <code>::-moz-range-track<\/code> and <code>::-moz-range-thumb<\/code>.<\/p>\n<p>The <code>::-moz-range-track<\/code> affects the input range track, while the <code>::-moz-range-thumb<\/code> affects the input handle bar.<\/p>\n<pre>\r\n.firefox input[type=range]::-moz-range-track {\r\n  border-radius: 8px;\r\n  height: 7px;\r\n  border: 1px solid #bdc3c7;\r\n  background-color: #fff;\r\n}\r\n.firefox input[type=range]::-moz-range-thumb {\r\n  background: #ecf0f1;\r\n  border: 1px solid #bdc3c7;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n}\r\n<\/pre>\n<p>We apply the exact same styles. Open Firefox, and you should get a similar result as in Webkit browsers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/firefox-result.jpg\" height=\"180\" width=\"500\" alt=\"Styled range slider in Firefox\"><\/figure>\n<h2>Internet Explorer<\/h2>\n<p>Internet Explorer displays the <code>range<\/code> input type quite differently from other browsers. To make it easier, here\u2019s a diagram showing the components that form the input.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/ie-input-range.jpg\" height=\"320\" width=\"500\" alt=\"IE input range diagram\"><\/figure>\n<p>IE also <a href=\"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/\">shows a tooltip<\/a> displaying the current value as you slide the handle bar.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/ie-input-range-tooltip.jpg\" height=\"180\" width=\"500\" alt=\"IE input range tooltip\"><\/figure>\n<p>Each of these input parts can be styled using IE\u2019s proprietary pseudo-elements <code>::-ms-fill-lower<\/code>, <code>::-ms-fill-upper<\/code>, <code>::-ms-thumb<\/code>, <code>::-ms-ticks<\/code>, and <code>::-ms-tooltip<\/code>. We will apply the same styles as in Webkit and Firefox.<\/p>\n<pre>\r\ninput[type=\"range\"]::-ms-fill-lower,\r\ninput[type=\"range\"]::-ms-fill-upper {\r\n  background: transparent;\r\n}\r\ninput[type=\"range\"]::-ms-track {\r\n  border-radius: 8px;\r\n  height: 7px;\r\n  border: 1px solid #bdc3c7;\r\n  background-color: #fff;\r\n}\r\ninput[type=\"range\"]::-ms-thumb {\r\n  background-color: #ecf0f1;\r\n  border: 1px solid #bdc3c7;\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n}\r\n<\/pre>\n<p>However, the output is not quite what we expected. The <strong>tick marks<\/strong> are visible, and the top and bottom of the handle bar are hidden.<\/p>\n<p>We can easily remove the <strong>tick marks<\/strong> by adding <code>step=\"any\"<\/code> to the input element. However, making the handle bar fully visible is not possible. It\u2019s as if the input element has <code>overflow<\/code> set to <code>hidden<\/code>, and this cannot be undone by setting <code>overflow<\/code> to <code>visible<\/code>. This is an issue I\u2019m still trying to solve. If you have a solution, please share it in the comment box below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/ie-final-result.jpg\" height=\"180\" width=\"500\" alt=\"Final result in IE\"><\/figure>\n<h2>Final Thought<\/h2>\n<p>The <code>range<\/code> input type is quite customizable, but each browser has its own approach, requiring longer code than expected. Hopefully, a standard will be established in the future to address this. Lastly, here are links to see the input range we have shown you in this article.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/html5-range-slider-styles\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/html5-range-slider-styles\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user interface, commonly found in applications, lets users slide the handle bar left or right to select a number within the range. However, each browser renders this input type slightly&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance - Hongkiat<\/title>\n<meta name=\"description\" content=\"The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance\" \/>\n<meta property=\"og:description\" content=\"The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-06T05:01:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-18T19:18:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance\",\"datePublished\":\"2014-06-06T05:01:24+00:00\",\"dateModified\":\"2024-07-18T19:18:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/\"},\"wordCount\":571,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-range-slider-style\\\/the-unstyled-handle-bar.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/\",\"name\":\"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-range-slider-style\\\/the-unstyled-handle-bar.jpg\",\"datePublished\":\"2014-06-06T05:01:24+00:00\",\"dateModified\":\"2024-07-18T19:18:22+00:00\",\"description\":\"The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-range-slider-style\\\/the-unstyled-handle-bar.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-range-slider-style\\\/the-unstyled-handle-bar.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-range-slider-style\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance - Hongkiat","description":"The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/","og_locale":"en_US","og_type":"article","og_title":"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance","og_description":"The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-06-06T05:01:24+00:00","article_modified_time":"2024-07-18T19:18:22+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance","datePublished":"2014-06-06T05:01:24+00:00","dateModified":"2024-07-18T19:18:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/"},"wordCount":571,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/","name":"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg","datePublished":"2014-06-06T05:01:24+00:00","dateModified":"2024-07-18T19:18:22+00:00","description":"The range input type is a new addition in HTML5, allowing users to input numbers within a specified range using a slider control. This intuitive user","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-range-slider-style\/the-unstyled-handle-bar.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-range-slider-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Style HTML5 Range Slider for Consistent Cross-Browser Appearance"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5o5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20713"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20713\/revisions"}],"predecessor-version":[{"id":72331,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20713\/revisions\/72331"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20713"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}