tb / ng2-nouislider

Angular2 noUiSlider directive
http://tb.github.io/ng2-nouislider/
MIT License
184 stars 114 forks source link

How can i add custom images instead of string values. Please help #135

Open duahimanshu100 opened 6 years ago

duahimanshu100 commented 6 years ago

How can i add custom images instead of string values. Please help i am using the #107

kiqq commented 6 years ago

I think that the easiest way is to change nouislider's source code in node_modules/nouislider/distribute/nouislider.js:

// Values are only appended for points marked '1' or '2'.
if ( values[1] ) {
    node = addNodeTo(element, false);
    node.className = getClasses(values[1], options.cssClasses.value);
    node.style[options.style] = offset + '%';
    node.innerHTML = formatter.to(values[0]); // <<------ change node.innerText to node.innerHTML
}

And in your custom formatter add images like strings:

  private strings: string[] = [ 
    '<img src="assets/img1.png" alt="img1" height="20" width="20">', 
    '<img src="assets/img2.png" alt="img2" height="20" width="20">'
  ];