I can see that component in crxde but after opening the page in edit mode I can see that component in content tree for 1-2 seconds and then unable to see it. 

No errors

As soon as opening a page in edit mode, a component has been disappearing from content tree. As a result I was unable to add component to the page and author.

Yes, I did but it's not getting applied since I'm using  input[type='range']::-webkit-slider-runnable-track  and input[type='range']::-webkit-slider-thumb in css to range slider track and thumb. 

No. I just used "granite/ui/components/coral/foundation/form/colorfield" sling resource type.Here is what I got.And then I'm giving ${properties.color} in style tag. It is applying when it is used for text but I want to use it to change the colors of range slider track and thumb.

I have followed the same but I want content authors to choose colors for range slider track and thumb from dialog box. Even if I add style tag in html to apply the color, it's not applying.

from dialog box they'll choose the colors by changing rgb values

but ${properties.color @ context='styleToken'} returns rgb value. In that case how can I give that value 

How can I use style="color:${properties.color @ context='styleToken'}" in pure css class as I wanted to give different colors as input at different times.

I was unable to add external script in html (html file in component). And also in js folder in client library. How can I add the third party library for adding pie chart.