0

Are there some hidden files here in this codepen that I am failing to see?

http://codepen.io/anon/pen/JddzEJ

I am trying to replicate the same in Plnkr but nothing shows up:

http://plnkr.co/edit/nlysGK2HNFXUtQGGrOIV?p=preview

[Form codepen:]

var range_els = document.querySelectorAll('input[type=range]'), 
    n = range_els.length, 
    style_el = document.createElement('style'), 
    styles = [], 
    track_sel = [
      '::-moz-range-track', 
      '::-webkit-slider-runnable-track', ' /deep/ #track'], 
    thumb_sel = ['::-webkit-slider-thumb', ' /deep/ #thumb'], 
    a = ':after', b = ':before', 
    s = ['', '%', '%'];

document.body.appendChild(style_el);

for(var i = 0; i < n; i++) {
  styles.push('');

  range_els[i].addEventListener('input', function() {
    var idx = this.id.split('r')[1] - 1, 
        base_sel = '.js #' + this.id, 
        str = '', 
        min = this.min || 0, max = this.max || 100, 
        c_style, u, edge_w, val;

    this.setAttribute('value', this.value);

    if(this.classList.contains('tip')) {
      str += base_sel + thumb_sel[0] + a + ',' + 
        base_sel + thumb_sel[1] + a + 
        '{content:"' + this.value + s[idx] + '"}';
    }

    if(this.classList.contains('fill')) {
      if(idx == 0) {
        c_style = getComputedStyle(this);
        u = c_style.backgroundSize.split(' ')[0].split('px')[0];
        edge_w = (c_style.width.split('px')[0] - u*(max - min))/2;
        val = ((this.value - min)*u + edge_w) + 'px';
      }
      else {
        val = this.value + '%';
      }

      if(this.classList.contains('fill-replace')) {
        str += base_sel + track_sel[0] + '{background-size:' + val + '}';
      }

      str += base_sel + track_sel[1] + a + ',' + 
        base_sel + track_sel[2] + a + '{width:' + val + '}';
    }

    styles[idx] = str;
    style_el.textContent = styles.join('');
  }, false);
}
Roman C
  • 49,761
  • 33
  • 66
  • 176
runtimeZero
  • 26,466
  • 27
  • 73
  • 126
  • 2
    someone decided to give this question a negative point but not point out the error .. your arrogance is not appreciated – runtimeZero May 03 '15 at 16:05
  • possible duplicate of [Why is document.body null in my javascript?](http://stackoverflow.com/questions/9916747/why-is-document-body-null-in-my-javascript) (look in the browser's error console.) – JJJ May 03 '15 at 16:10

1 Answers1

0

The CSS has loads of errors the ones you copied as I presume it is minified or has some sort of compression

Press view compiled and copy paste the compiled CSS into the CSS file of the plunkr

The 3rd slider did not work for me, but the rest everything was fine.

DodoSombrero
  • 108
  • 1
  • 12