{"id":8821,"date":"2024-01-10T17:56:00","date_gmt":"2024-01-10T17:56:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8821"},"modified":"2024-01-22T15:56:30","modified_gmt":"2024-01-22T10:56:30","slug":"round-range-slider-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/","title":{"rendered":"Round Range Slider in JavaScript"},"content":{"rendered":"

This JavaScript code implements a “Round Range Slider” feature on HTML elements. It allows users to interactively select a range within a circular slider. The core functionality of this code is to calculate the selected range based on the user’s mouse movements and update the display accordingly. This code is helpful for creating user-friendly interfaces for selecting values within a circular range.<\/p>\n

You can use this code in web applications and websites to create visually appealing circular range sliders. It offers a user-friendly way for users to select values within a circular range, enhancing the user experience.<\/p>\n

How to Create a Round Range Slider In Javascript<\/h2>\n

1. First of all, load the Normalize CSS<\/a> by adding the following CDN link into the head tag of your web\/app project.<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"><\/pre>\n
2. Create the HTML structure for your Round Range Slider. You can use the following HTML code as a starting point. Ensure you have an HTML container with the class “round-slider” for each slider you want to create.<\/p>\n
<div class=\"round-slider\">\r\n\t<div class=\"selection\" style=\"\"><\/div>\r\n\t<div class=\"holder\" style=\"color: hsl(120, 100%, 50%);\">100%<\/div>\r\n<\/div>\r\n<div class=\"round-slider\">\r\n\t<div class=\"selection\" style=\"\"><\/div>\r\n\t<div class=\"holder\" style=\"color: hsl(120, 100%, 50%);\">100%<\/div>\r\n<\/div><\/pre>\n
3. Next, style the Range Slider using CSS. The CSS code provided defines the appearance and behavior of the slider elements. You can customize the colors, sizes, and other visual aspects to match your project’s design.<\/p>\n
.round-slider {\r\n\tdisplay: grid;\r\n\tposition: relative;\r\n\twidth: 150px;\r\n\theight: 150px;\r\n\tjustify-self: center;\r\n\talign-self: center;\r\n\tborder-radius: 50%;\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n}\r\n.round-slider .selection {\r\n\twidth: 140px;\r\n\theight: 140px;\r\n\tborder-radius: 50%;\r\n\tbackground: #00ccf8;\r\n\tbox-shadow: 0px 0px 3px 0px #00ccf8;\r\n\tgrid-row: 1;\r\n\tgrid-column: 1;\r\n\tjustify-self: center;\r\n\talign-self: center;\r\n\tpointer-events: none;\r\n\t\/* clip-path: polygon(value% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%); *\/\r\n}\r\n.round-slider .selection:after {\r\n\tdisplay: block;\r\n\tcontent: \"\";\r\n\twidth: 3px;\r\n\theight: calc(50% - 5px);\r\n\tbackground-color: red;\r\n\tposition: absolute;\r\n\tleft: calc(50% - 1px);\r\n\ttransform-origin: 1px 100%;\r\n\ttransform: rotate(0deg);\r\n}\r\n.round-slider .holder {\r\n\twidth: 110px;\r\n\theight: 110px;\r\n\tbackground: rgba(255, 255, 255, 1);\r\n\tborder-radius: 50%;\r\n\tgrid-row: 1;\r\n\tgrid-column: 1;\r\n\tjustify-self: center;\r\n\talign-self: center;\r\n\tpointer-events: none;\r\n\tz-index: 2;\r\n\ttext-align: center;\r\n\tline-height: 110px;\r\n\tfont-size: 2em;\r\n\tbox-shadow: 0px 0px 4px 2px #00ccf8;\r\n}<\/pre>\n
4. Now, let’s add the JavaScript code to make the Round Range Slider interactive. The following JavaScript code handles user interactions, such as clicking and dragging, to select values within the circular range. Make sure to include this script in your HTML file.<\/p>\n
var sliders = document.getElementsByClassName(\"round-slider\");\r\nconsole.log(\"Sliders:\", sliders);\r\nfor (let i = 0; i < sliders.length; i++) {\r\n\tsliders[i].addEventListener(\"click\", round_slider_tune, false);\r\n\tsliders[i].addEventListener(\"mousedown\", function(event) {\r\n\t\tsliders[i].onmousemove = function(event) {\r\n\t\t\tif (event.buttons == 1 || event.buttons == 3) {\r\n\t\t\t\tround_slider_tune(event);\r\n\t\t\t}\r\n\t\t}\r\n\t});\r\n}\r\n\r\nfunction round_slider_tune(event) {\r\n\tlet eventDoc = (event.target && event.target.ownerDocument) || document,\r\n\t\tdoc = eventDoc.documentElement,\r\n\t\tbody = eventDoc.body;\r\n\tevent.pageX = event.clientX +\r\n\t\t  (doc && doc.scrollLeft || body && body.scrollLeft || 0) -\r\n\t\t  (doc && doc.clientLeft || body && body.clientLeft || 0);\r\n\tevent.pageY = event.clientY +\r\n\t\t  (doc && doc.scrollTop  || body && body.scrollTop  || 0) -\r\n\t\t  (doc && doc.clientTop  || body && body.clientTop  || 0 );\r\n\tlet output = event.target.getElementsByClassName(\"selection\")[0],\r\n\t\ttext = event.target.getElementsByClassName(\"holder\")[0],\r\n\t\tstyleafter = document.head.appendChild(document.createElement(\"style\")),\r\n\t\telpos = event.target.getBoundingClientRect(),\r\n\t\tcX = elpos.width \/ 2,\r\n\t\tcY = elpos.height \/ 2,\r\n\t\teX = event.pageX - elpos.left,\r\n\t\teY = event.pageY - elpos.top,\r\n\t\tdX = 0,\r\n\t\tdY = 0,\r\n\t\tangle = Math.atan2(cX - eX, cY - eY) * (180 \/ Math.PI),\r\n\t\tvalue = 100;\r\n\t\/\/console.log(cX, cY, eX, eY, angle);\r\n\r\n\tif (Math.abs(eX - cX) >= Math.abs(eY - cY)) { \/\/ 110 90\r\n\t\tdX = 150 \/ 2 + Math.sign(eX - cX) * 150 \/ 2;\r\n\t\tdY = 150 \/ 2 + (eY - cY) \/ Math.abs(eX - cX) * 150 \/ 2;\r\n\t} else {\r\n\t\tdX = 150 \/ 2 + (eX - cX) \/ Math.abs(eY - cY) * 150 \/ 2;\r\n\t\tdY = 150 \/ 2 + Math.sign(eY - cY) * 150 \/ 2;\r\n\t}\r\n\tdX = Math.round(dX \/ 150 * 100)\r\n\tdY = Math.round(dY \/ 150 * 100)\r\n\t\/\/console.log(dX + \"%\", dY + \"%\");\r\n\t\/*if (0 < angle && angle <= 45) {\r\n\t} else if (45 < angle && angle <= 120) {\r\n\t} else if ((120 < angle && angle <= 180) || (-180 < angle && angle <= -120)) {\r\n\t} else if (-120 < angle && angle <= -45) {\r\n\t} else if (-45 < angle && angle <= 0) {}*\/\r\n\tif (0 <= dX && dX < 50 && dY == 0) {\r\n\t\toutput.style = \"clip-path: polygon(\" + dX + \"% \" + dY + \"%, 50% 0%, 50% 50%);\";\r\n\t\tvalue = Math.round((50 - dX) \/ 50 * 12.5);\r\n\t} else if (dX == 0 && 0 <= dY && dY <= 100) {\r\n\t\toutput.style = \"clip-path: polygon(\" + dX + \"% \" + dY + \"%, 0% 0%, 50% 0%, 50% 50%);\";\r\n\t\tvalue = Math.round(12.5 + dY \/ 100 * 25);\r\n\t} else if (0 <= dX && dX <= 100 && dY == 100) {\r\n\t\toutput.style = \"clip-path: polygon(\" + dX + \"% \" + dY + \"%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);\";\r\n\t\tvalue = Math.round(37.5 + dX \/ 100 * 25);\r\n\t} else if (dX == 100 && 0 <= dY && dY <= 100) {\r\n\t\toutput.style = \"clip-path: polygon(\" + dX + \"% \" + dY + \"%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);\";\r\n\t\tvalue = Math.round(62.5 + (100 - dY) \/ 100 * 25);\r\n\t} else if (50 <= dX && dX <= 100 && dY == 0) {\r\n\t\toutput.style = \"clip-path: polygon(\" + dX + \"% \" + dY + \"%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);\";\r\n\t\tvalue = Math.round(87.5 + (100 - dX) \/ 50 * 12.5);\r\n\t}\r\n\tstyleafter.innerHTML = \".round-slider .selection:after {transform: rotate(\" + -angle + \"deg);}\";\r\n\tlet hue = Math.floor(value \/ 100 * 120),\r\n\t\tsaturation = Math.abs(value - 50);\r\n\ttext.innerHTML = value + \"%\";\r\n\ttext.style = \"color: hsl(\" + hue + \", 100%, \" + saturation + \"%);\";\r\n}<\/pre>\n
That’s all! hopefully, you have successfully created a Round Range Slider. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code implements a “Round Range Slider” feature on HTML elements. It allows users to interactively select a range…<\/p>\n","protected":false},"author":1,"featured_media":8836,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[118],"class_list":["post-8821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-range-sliders"],"acf":[],"yoast_head":"\nRound Range Slider in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Round Range Slider in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Round Range Slider in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Round Range Slider in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T17:56:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:56:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Round Range Slider in JavaScript\",\"datePublished\":\"2024-01-10T17:56:00+00:00\",\"dateModified\":\"2024-01-22T10:56:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\"},\"wordCount\":274,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png\",\"keywords\":[\"Range Sliders\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\",\"name\":\"Round Range Slider in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png\",\"datePublished\":\"2024-01-10T17:56:00+00:00\",\"dateModified\":\"2024-01-22T10:56:30+00:00\",\"description\":\"Here is a free code snippet to create a Round Range Slider in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Round Range Slider in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Round Range Slider in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Round Range Slider in JavaScript — CodeHim","description":"Here is a free code snippet to create a Round Range Slider in JavaScript. You can view demo and download the source code.","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:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Round Range Slider in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Round Range Slider in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T17:56:00+00:00","article_modified_time":"2024-01-22T10:56:30+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Round Range Slider in JavaScript","datePublished":"2024-01-10T17:56:00+00:00","dateModified":"2024-01-22T10:56:30+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/"},"wordCount":274,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png","keywords":["Range Sliders"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/","name":"Round Range Slider in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png","datePublished":"2024-01-10T17:56:00+00:00","dateModified":"2024-01-22T10:56:30+00:00","description":"Here is a free code snippet to create a Round Range Slider in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Round-Range-Slider-in-JavaScript.png","width":1280,"height":960,"caption":"Round Range Slider in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/round-range-slider-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Round Range Slider in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1839,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8821"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8821\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8836"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}