{"id":2186,"date":"2018-07-25T21:54:59","date_gmt":"2018-07-26T02:54:59","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2186"},"modified":"2018-07-28T13:40:25","modified_gmt":"2018-07-28T18:40:25","slug":"javascript-create-custom-range-slider-using-bootstrap-slider","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/07\/25\/javascript-create-custom-range-slider-using-bootstrap-slider\/","title":{"rendered":"JavaScript: How to create a custom range slider using bootstrap-slider"},"content":{"rendered":"<p>This article describes how to create a custom HTML range slider using Bootstrap 3, jQuery, HTML, CSS, and a JavaScript package called &#8220;bootstrap-slider&#8221;.\u00a0 There are download and installation instructions for this package on <a href=\"https:\/\/github.com\/seiyria\/bootstrap-slider\">github<\/a>.<\/p>\n<p>This slider can be custom styled with CSS and comes with a built-in tooltip. See the graphic below for a description of the different parts of the slider.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2201\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/07\/bootstrap-slider.png\" alt=\"\" width=\"571\" height=\"243\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/07\/bootstrap-slider.png 571w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/07\/bootstrap-slider-300x128.png 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/p>\n<h4><strong>Step 1: Set up CDNs<\/strong><\/h4>\n<p>The first thing we need in our HTML document is to set up CDNs to Bootstrap 3, jQuery, bootstrap-slider .js file and bootstrap-slider .css file. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!-- Bootstrap 3 CSS  --&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\"&gt;\r\n\r\n&lt;!-- jQuery  --&gt;\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!-- bootstrap-slider js + css  --&gt;\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-slider\/10.2.0\/bootstrap-slider.min.js\"&gt;&lt;\/script&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-slider\/10.2.0\/css\/bootstrap-slider.min.css\" \/&gt;<\/pre>\n<p><strong>Bootstrap 3:<\/strong><br \/>\nhttps:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css<\/p>\n<p><strong>jQuery:<\/strong><br \/>\nhttps:\/\/code.jquery.com\/jquery-3.3.1.min.js<\/p>\n<p><strong>bootstrap-slider files:<\/strong><br \/>\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-slider\/10.2.0\/bootstrap-slider.min.js<br \/>\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-slider\/10.2.0\/css\/bootstrap-slider.min.css<\/p>\n<p><strong>Note<\/strong>: The Bootstrap 3 and jQuery CDNs should be declared <em>before<\/em> the bootstrap-slider files.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Step 2: Set up HTML<\/strong><\/h4>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input id=\"ex1\" data-slider-id='ex1Slider' type=\"text\" data-slider-min=\"0\" data-slider-max=\"20\" data-slider-step=\"1\" data-slider-value=\"14\"\/&gt;<\/pre>\n<p>To make the slider, set up a&#8221;type=text&#8221; input tag with some slider arguments such as:<\/p>\n<ul>\n<li>data-slider-id (the name of the slider)<\/li>\n<li>data-slider-min (the minimum value in the range)<\/li>\n<li>data-slider-max (the maximum value in the range)<\/li>\n<li>data-slider-step (increment by units of this number)<\/li>\n<li>data-slider-value (a starting value for the slider)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><strong>Step 3: Set up custom CSS<\/strong><\/h4>\n<p>Instead of pasting all of the custom CSS code here, I will embed a slider I saved in Codepen:<\/p>\n<p class='codepen'  data-height='290' data-theme-id='0' data-slug-hash='JByGee' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Bootstrap-slider with tooltip always visible by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n<p>&nbsp;<\/p>\n<p>As seen in this codepen, you can customize details such as slider color, height, length, handle size and tooltip.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>Step 4: Instantiate the slider with jQuery or JavaScript<br \/>\n<\/strong><\/h4>\n<p>Here is some JavaScript that will make it so that the tooltip is always visible (as seen in the above codepen):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Without JQuery\r\nvar slider = new Slider(\"#ex1\", {\r\n   tooltip: 'always'\r\n});<\/pre>\n<p>Or, if you only want to see the tooltip when dragging the handle, here is some jQuery:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$('#ex1').slider({\r\n  formatter: function(value) {\r\n    return value;\r\n  }\r\n});<\/pre>\n<p>For example:<\/p>\n<p class='codepen'  data-height='290' data-theme-id='0' data-slug-hash='YjxWLe' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Bootstrap-slider with tooltip by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n<p>&nbsp;<\/p>\n<p>For more information on bootstrap-slider, see:<br \/>\n<a href=\"https:\/\/github.com\/seiyria\/bootstrap-slider\">https:\/\/github.com\/seiyria\/bootstrap-slider<\/a><br \/>\n<a href=\"https:\/\/seiyria.com\/bootstrap-slider\/\">https:\/\/seiyria.com\/bootstrap-slider\/<\/a><\/p>\n<p>For more information about HTML range sliders, see:<br \/>\n<a href=\"https:\/\/www.w3schools.com\/howto\/howto_js_rangeslider.asp\">https:\/\/www.w3schools.com\/howto\/howto_js_rangeslider.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article describes how to create a custom HTML range slider using Bootstrap 3, jQuery, HTML, CSS, and a JavaScript package called &#8220;bootstrap-slider&#8221;.\u00a0 There are download and installation instructions for this package on github. This slider can be custom styled with CSS and comes with a built-in tooltip. See the graphic below for a description &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/07\/25\/javascript-create-custom-range-slider-using-bootstrap-slider\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: How to create a custom range slider using bootstrap-slider<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[134,10,81,45,123],"class_list":["post-2186","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-bootstrap-3","tag-css","tag-html5","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2186"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2186\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2186\/revisions\/2224"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}