UNPKG

rangeslider-pure

Version:

Simple, small and fast vanilla JavaScript polyfill for the HTML5 <input type="range"> slider element

1 lines 2.76 kB
{"version":3,"sources":["webpack://rangeSlider/./src/range-slider.css"],"names":[],"mappings":"AAAA;IACI,eAAe;IACf,+CAA+C;IAC/C,oBAAoB;CACvB;;AAED;IACI,mBAAmB;IACnB,oBAAoB;CACvB;;AAED;IACI,aAAa;IACb,YAAY;CACf;;AAED;IACI,aAAa;IACb,YAAY;CACf;;AAED;IACI,4DAA4D;IAC5D,aAAa;CAChB;;AAED;IACI,oBAAoB;IACpB,mBAAmB;CACtB;;AAED;IACI,aAAa;IACb,OAAO;IACP,QAAQ;CACX;;AAED;IACI,YAAY;IACZ,UAAU;IACV,QAAQ;CACX;;AAED;IACI,uBAAuB;IACvB,gBAAgB;IAChB,sBAAsB;IACtB,YAAY;IACZ,aAAa;IACb,mBAAmB;IACnB,8EAA8E;IAC9E,uCAAuC;IACvC,mBAAmB;CACtB;;AAED;IACI,WAAW;CACd;;AAED;IACI,YAAY;IACZ,UAAU;CACb;;AAED;IACI,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,aAAa;IACb,aAAa;IACb,mBAAmB;IACnB,OAAO;IACP,SAAS;IACT,UAAU;IACV,QAAQ;IACR,+EAA+E;IAC/E,mBAAmB;CACtB;;AAED;IACI,2EAA2E;CAC9E;;AAED;IACI,4CAA4C;CAC/C;;AAED;IACI,mBAAmB;IACnB,SAAS;IACT,aAAa;IACb,oBAAoB;IACpB,oBAAoB;CACvB","file":"range-slider.css","sourcesContent":[".rangeSlider, .rangeSlider__fill {\n display: block;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n border-radius: 10px;\n}\n\n.rangeSlider {\n position: relative;\n background: #7f8c8d;\n}\n\n.rangeSlider__horizontal {\n height: 20px;\n width: 100%;\n}\n\n.rangeSlider__vertical {\n height: 100%;\n width: 20px;\n}\n\n.rangeSlider--disabled {\n filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);\n opacity: 0.4;\n}\n\n.rangeSlider__fill {\n background: #16a085;\n position: absolute;\n}\n\n.rangeSlider__fill__horizontal {\n height: 100%;\n top: 0;\n left: 0;\n}\n\n.rangeSlider__fill__vertical {\n width: 100%;\n bottom: 0;\n left: 0;\n}\n\n.rangeSlider__handle {\n border: 1px solid #ccc;\n cursor: pointer;\n display: inline-block;\n width: 40px;\n height: 40px;\n position: absolute;\n background: white linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n}\n\n.rangeSlider__handle__horizontal {\n top: -10px;\n}\n\n.rangeSlider__handle__vertical {\n left: -10px;\n bottom: 0;\n}\n\n.rangeSlider__handle:after {\n content: \"\";\n display: block;\n width: 18px;\n height: 18px;\n margin: auto;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));\n border-radius: 50%;\n}\n\n.rangeSlider__handle:active {\n background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));\n}\n\ninput[type=\"range\"]:focus + .rangeSlider .rangeSlider__handle {\n box-shadow: 0 0 8px rgba(142, 68, 173, 0.9);\n}\n\n.rangeSlider__buffer {\n position: absolute;\n top: 3px;\n height: 14px;\n background: #2c3e50;\n border-radius: 10px;\n}\n"],"sourceRoot":""}