From 35fde7197ca7e4cf9282613e118d974875ea9158 Mon Sep 17 00:00:00 2001
From: Geoffray <gwarnants@users.noreply.github.com>
Date: Thu, 26 Nov 2015 10:55:49 +0100
Subject: [PATCH] Doesn't work inside a display: none !important container

Rangeslider doesn't work if it is initialized inside a hidden container where display: none has been forced with an **!important** declaration. This way to hide elements is used by Bootstrap, HTML5 Boilerplate, ...

```css
.hidden {
  display: none !important;
}
```
```html
<div class="hidden"">
  <input type="range" />
</div>
```
This is because hiddenParentNodes[i].style.display = 'block' doesn't override important style. My fix correct this problem.
---
 src/rangeslider.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/rangeslider.js b/src/rangeslider.js
index 8980546..df7f25f 100644
--- a/src/rangeslider.js
+++ b/src/rangeslider.js
@@ -161,7 +161,11 @@
                 inlineStyle[i] = hiddenParentNodes[i].style.cssText;
 
                 // visually hide
-                hiddenParentNodes[i].style.display = 'block';
+                if (hiddenParentNodes[i].style.setProperty) {
+                    hiddenParentNodes[i].style.setProperty('display', 'block', 'important');
+                } else {
+                    hiddenParentNodes[i].style.cssText += ';display: block !important';
+                }
                 hiddenParentNodes[i].style.height = '0';
                 hiddenParentNodes[i].style.overflow = 'hidden';
                 hiddenParentNodes[i].style.visibility = 'hidden';