{"_id":"@material/slider","_rev":"1750-73f3e5df2f7931a87b5b5c108fdb2465","name":"@material/slider","description":"The Material Components for the web slider component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/slider","version":"0.1.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.1.0","maintainers":[{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd1df402ca2072c5a8f336ab050453e840e2b21a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.1.0.tgz","integrity":"sha512-2iUGnd8h8dkWFS9JnEmC0h811vkuRITahkgW6evO4QmNJUAqMkGjnGX/D2Kdaf7uuJ9TQ+Of7peHMfdr3hoR6w==","signatures":[{"sig":"MEQCIEFzOCOFy5hh/RUsOHjgRHI34a2OjjUCsajqx71ZKvRTAiAG+86SvhWpjGoNfNpI15+9QcKmdyIe17jufKnCjTM5ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/rtl":"^0.1.5","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/animation":"^0.2.2"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.1.0.tgz_1497282806749_0.2643103178124875","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@material/slider","version":"0.1.1","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.1.1","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46bb1c80a9534892ccec9fa098e151b69886023","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.1.1.tgz","integrity":"sha512-NLsaoNwXYIqqJUweZ5fMkm6YSNuyuDVU0IgTr0m7TL19zYP9sjcJyExeSrkN3TPNthfRWMFO71GKj7yAAdlKYA==","signatures":[{"sig":"MEUCIQCFQG1IU4PUw1KkpLflQPmmRw/31NM1lFBSfpoZqE4/1wIgDvBbV/hj3yM0gQr2G4tlzsaDm7GLscDDCWRUMavutHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"d46bb1c80a9534892ccec9fa098e151b69886023","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/animation":"^0.2.2"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.1.1.tgz_1498493463886_0.9452153698075563","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@material/slider","version":"0.2.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a929384503ca3b20fcf22db584f034b1e2062e3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.0.tgz","integrity":"sha512-jNOlS4F6Kcm0fft9LiYghWnDCD5Qm5Rh44pqQ0hn1QLEK0zaCI95jkMBt9vaVUjKnzh1Ry/UgHL3UMGPcZvhhw==","signatures":[{"sig":"MEUCIQDdZC1k3u0mAz3lF0ks1iov7f4BXWp9qShJNSRB6vrarwIgO7vT/G2xI/PYtS0il2Y6B72rv+i8ocy/W96z/26ip2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"1a929384503ca3b20fcf22db584f034b1e2062e3","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/animation":"^0.2.2"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.0.tgz_1499702336744_0.6294548758305609","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@material/slider","version":"0.2.1","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.1","maintainers":[{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7dc6e5a88f4366bbed41ba45e555c7d07903f63","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.1.tgz","integrity":"sha512-L+am+rBu8NPk76/gseygyjfxZdXrwvN1JifoI+PcdEEXYKez88bH+32CvF1UViMWApFj7uPB0gQ8ij/XT00xjg==","signatures":[{"sig":"MEYCIQDp4M40FkMlljuZF/uAbFZNW4t7IpnA/HywxgN7MSrE8QIhANGDFns5oImBLvGDtf6Q1rMx37IGHLGPDNqNSzoLlNHv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c7dc6e5a88f4366bbed41ba45e555c7d07903f63","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/animation":"^0.3.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.1.tgz_1500911366684_0.06170412851497531","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"@material/slider","version":"0.2.2","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.2","maintainers":[{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f79f72795bf473ce1a2e21e678cd1934446dc937","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.2.tgz","integrity":"sha512-/Kp8ZfKAUhJbnZOLNuj5rOysxhKjErm766Clq4g2TzsJqa1FmNuBIr5SILUCFMWLe3a2yQg6+MZM8jsbu83Q+A==","signatures":[{"sig":"MEQCIAy6bKMfcUme+dDK+GAFvJ1Xn/ZTR0UJLvLC0pqphOwQAiAOrJ6V7EL/ycWvDRMt5BhopEDAfbLEJHeAlDU7Ge2kuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f79f72795bf473ce1a2e21e678cd1934446dc937","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/animation":"^0.3.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.2.tgz_1502138913162_0.4841553757432848","host":"s3://npm-registry-packages"}},"0.2.3":{"name":"@material/slider","version":"0.2.3","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.3","maintainers":[{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"056658ce29c6f42146ef04988b3caf0a6988d97f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.3.tgz","integrity":"sha512-JPIHq1z24JPBxTrxXfnZJC6YgyQ5Hh3W1K9Ub5UWhPuJWJkSWFEA9N+IZJvmwL5jQ4fRzNAyqfKn2z8VYC28yg==","signatures":[{"sig":"MEUCICp2/W+qQU+qBmCA+enyUodYrRDmOUnu6MKTtNVHWtXYAiEAqqgJ/KJJEqweHW86Q3tyymdyI0qOxxy2XLSh0gJ5Fpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/animation":"^0.3.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.3.tgz_1503336480895_0.9902663787361234","host":"s3://npm-registry-packages"}},"0.2.4":{"name":"@material/slider","version":"0.2.4","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.4","maintainers":[{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a42b6beed83a09c20c09ff5c6a39490675f9bc74","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.4.tgz","integrity":"sha512-/UZwBfM59vPHoy1jEqWLwj5q2XCRn4QoeEFJIpOhmV8yTMQ1d/PVK1Z8PDFTmJ3bRccZPobSXseNF4fNGnFDlg==","signatures":[{"sig":"MEQCIFsChU2cO+b/qDmRoGmw5k0cA/VbYznR1f7K8oAK/mPDAiA5iDUCra8VPKE5UFo8nafdjU0OkYDQST/Zs/cVnHHOQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/animation":"^0.3.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.4.tgz_1503586015814_0.0660302231553942","host":"s3://npm-registry-packages"}},"0.2.5":{"name":"@material/slider","version":"0.2.5","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.5","maintainers":[{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26e9448925333857d64473ed15bc276dfa700be3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.5.tgz","integrity":"sha512-Nlp4ugl5m29+QDBRLvFAtMP87g+yEHF5CXlLp0RDzjuGNdGk6LOk/WpXLN4tCbHCP2dwKqbjCIGoCL/KLAzvww==","signatures":[{"sig":"MEUCIQCU+2WQikXOw12v3ZMvE1vQkdvUUcQaGCZkqcxPubmlQAIgXJKzo3aw5Mp8vFJsaaFjRiImJLZJka/vhE8P3jSs2b8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"26e9448925333857d64473ed15bc276dfa700be3","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/animation":"^0.3.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.5.tgz_1504642577647_0.2744755046442151","host":"s3://npm-registry-packages"}},"0.2.6":{"name":"@material/slider","version":"0.2.6","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.6","maintainers":[{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219670aed967fe1932ba9a0ae52c6c389f50b641","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.6.tgz","integrity":"sha512-mXhieBaIwjgj2+KoBRIiJkMbqOcmp1vG3qxwnvdu5+OOpYgHiRSbFz2UmlLXNf/Z2llB56R0YUD39jyoVtqCtw==","signatures":[{"sig":"MEYCIQC/jLYAsfnJQMLbmPakX155FW2nzZhgCaGTqeLpYTNPawIhAPJ/3Z6POZZuhXmG7WLyasod+fuoD7Sp7A2C7cQVs6ff","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/animation":"^0.4.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.6.tgz_1505759754910_0.30054841842502356","host":"s3://npm-registry-packages"}},"0.2.7":{"name":"@material/slider","version":"0.2.7","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.2.7","maintainers":[{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40dfb13d2a0e92199aec1cf18a63ab294af5bc8","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.2.7.tgz","integrity":"sha512-f4ZQfv95ielNxocz2c6hPdyE9NGomybBGaCanoc8DLDDv0Ome4T23gd453NlpfMBuPuDZ3Fv7DSFP8Jx0QCW0w==","signatures":[{"sig":"MEQCIDmosQwXSXRPA0ERbOlIfXY8qrOAV62RJ0d2niisYySRAiAXbvRAztPFln1h8rSQzzSmaZT7unXE6k2Te07X+UUIjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"a40dfb13d2a0e92199aec1cf18a63ab294af5bc8","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/animation":"^0.4.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.2.7.tgz_1506978715072_0.9465524114202708","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/slider","version":"0.23.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.23.0","maintainers":[{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db069f8b9bee554bad8ca48d734c70be4abcf8eb","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.23.0.tgz","integrity":"sha512-aREWE+OKfcfPWlX1MGfYafY0DbQu29tuL3Ks697gQG+ZbINhTfptVT0U5esDJ1x1YHNFBpujXC64jANOAGGDtQ==","signatures":[{"sig":"MEYCIQDTS/fLmvrMKd+xyGIekq0UQntzfXOthxHgyB/EDeA67wIhANt8pBhizbbY+Q6R7P8PtgZeYOVb2sfvSdWHMC7Dye9a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/animation":"^0.4.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.23.0.tgz_1508187747980_0.8420496857725084","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/slider","version":"0.24.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.24.0","maintainers":[{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48e111a86512e9d41e2f82a1f7ba7307fd31b109","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.24.0.tgz","integrity":"sha512-8j9Vmcq7NaBtSsRL7fPsDWWr1xJpWalLeaAyaSbIZqGUiIRddxGpEzHqVviOkZPQ/4SpsinJj8FfgXE7MkjpIA==","signatures":[{"sig":"MEUCIQCmZnYDC7r85ntm6jzjlJem4AHp5sGq3ek21TnWK91RsAIgBWba6GKwqINYqPQrfratjBLSq5B30OmfJpgjyjBpPXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/animation":"^0.4.1"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.24.0.tgz_1509390694911_0.8539400666486472","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/slider","version":"0.25.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.25.0","maintainers":[{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b9c035e308b9be03728857c93af76fff648c079","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.25.0.tgz","integrity":"sha512-arjfJBJ6W3yYfGzoiRV3CQELqsQs/AZ6zO1eEBMtUFXXl1frL1g02t0qhNC1AaFs+4hzQEX4bFECE6pGeT83mw==","signatures":[{"sig":"MEUCIAIzz4Nzaym35QH8UQcrHtmlonqXA4hzy1tGpNK3TePoAiEAoMBRHvXw9oOG7RXT9XSpPKSc0U7RfSFEEB++e0E+v4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.25.0.tgz_1510603354069_0.6040753766428679","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/slider","version":"0.26.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.26.0","maintainers":[{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8af739a3c820b493d1926f7a17e84602cd0103d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.26.0.tgz","integrity":"sha512-H8VM91ixBsQoKTuJflwU0Qho2HMqQAjpLJS8F5pNGokQ7f304Y5iK0tvqjLalXNJSBJUTPJqVQxGuwLFIQplCA==","signatures":[{"sig":"MEUCIQDOEVatI83fCj3Cm3mI5p9n47YE4VFBjvFM7rnd803VogIgMvKKcjcIgXZv5jR8Ly27WqkkycuyLeSSET+5kocxxFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.26.0.tgz_1511821589291_0.8596761282533407","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/slider","version":"0.27.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.27.0","maintainers":[{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e624fb1b9d5d30f25e7d74ad836d9995a2efaabc","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.27.0.tgz","integrity":"sha512-RVZTEI+KHuDVSbs234hr0FHBYYtuCaZpI2YhDEUrkdD57iVKPqLNCROmCtoxvuselVanho3awAKUJZw6Jj6ovA==","signatures":[{"sig":"MEUCIE8Brj77c/DodOQfjPAqAKxmuZYF60n1wQ4Zx5rO7UBfAiEA7633x8UOXnoTeYmoT9VbvOx7NHSyWLhvjKGbGWKsazw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.27.0.tgz_1513020939438_0.9980873877648264","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/slider","version":"0.28.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.28.0","maintainers":[{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ecab6f9ce453c1fb42e20c3b1efbff0b9112a2","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.28.0.tgz","integrity":"sha512-aCF4WyFRu7TSr/n2AjhAJKGobck5KFJ2QG0RNXcdBOAteuFZMy6/mcbpzQbHdW+RJPLWGYtxLiVsJJBaGQmSJQ==","signatures":[{"sig":"MEYCIQDsdSGgA5JwsI+HmvHFs9Ri2BvWSvyb1kU9RHEl+4HOnQIhAOdW7BXQvH3hDDfobz1R+VlqyZhWzYJhLbidHoZ7Y4fV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.28.0.tgz_1515437716523_0.731936005409807","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/slider","version":"0.29.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.29.0","maintainers":[{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3edccd812e554fba018f9516bc031720218a6c7e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.29.0.tgz","integrity":"sha512-rJTTptTlabt6RWuuGEePM+kckOnB95hK6tWIdiQFgjv/y1usmkQSC3OdtacQMw4SNysIWpECdUyBrhjkUH/syg==","signatures":[{"sig":"MEYCIQD/aB6YHM/To8Sx8KLA5ojPi4Vn6pXpQjN2oRQpcrbW2gIhAN8BHXcZX1W8RXcZG7aUjlpS2brsRS015Q7fNvsPSJbI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.29.0","@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.29.0.tgz_1516645861548_0.19549636403098702","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/slider","version":"0.30.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.30.0","maintainers":[{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caf218a01a454c4085f6cae8c872dc49df7fc90a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.30.0.tgz","integrity":"sha512-/qAq4INRBF//wgNVlZoD2PgTThlffOUxQ0Q6TCIlUUO/vUrJybaPZZIxHTtSfq9Z1sxgmFV6p/2RFcc9HC7DZQ==","signatures":[{"sig":"MEQCIDUVIDJ5KLnfT80LPIKvwQirgwDtF4KOWkSmtdD85WoeAiAMAYlBde/dNPvrNhBAk5ruYw/sNu8TnpaINgadv980qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/slider-0.30.0.tgz_1517868182080_0.9698272862005979","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/slider","version":"0.32.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36aa6c3f89793817f88db395b1781182d6fe2456","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.32.0.tgz","fileCount":14,"integrity":"sha512-FmV9tjzhj9KfTpxXL2YNgV3STQTWXmROp7SJqrz8v2JpDXiVyI/pq/DhcFLEMvs096cIZWgH+iyZPQGFTPH12A==","signatures":[{"sig":"MEUCIQD8ZRe5SpImhlmWf2UjtaVC9oG0vNqeALMIJgEmTXnWJgIgM62idlGKpYzPQsYtwJLePTk1P8QtnudZ51JQort/j2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165495},"main":"index.js","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.32.0_1520287730008_0.22172486982548345","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/slider","version":"0.33.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8a061758da9ae17b3b0bfbc13e429bf0ae2db5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.33.0.tgz","fileCount":14,"integrity":"sha512-HFh1Ajv/pAG6Yu30swzhhN8u3+mYJTi/1P2zMUADT1KHs3Zex3/KRxAbdBaiN2BeCTVtko7zU+lOfx1OuaUsSw==","signatures":[{"sig":"MEUCIQCzB4ppIFCPRuLp9HbqvJf0hfk4WYBzp9q+WSRX9eBNNwIgZYK/InmcH9l8MwRdvkypgt9hKA+OIK7IVAcKKrcb+n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165317},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.33.0_1521477609445_0.03283536790558772","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/slider","version":"0.34.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"851d4613c946942b31cffdc9783fe47fa1ea8739","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.34.0.tgz","fileCount":14,"integrity":"sha512-yv62H/b3ZYqZCJUToHuU5k8WcMYY2p2vFFeD4pBpGF405ECN4q78W23UqP5YGQb9s7ZxX8Kz16U7h+SYCI+cEw==","signatures":[{"sig":"MEUCIQCBqoUrLE61KlsryFv+XP0XzlrYztTU2doq9iLnSDnOkwIgMQj4nR2PZ7tTW+TyKiD3niom32hkPmeikp1WqBliYo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165316},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.34.0_1522705925033_0.42535726827253373","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/slider","version":"0.35.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0599b8dfdbdc0a7e1d67beb37bf8eb290a8b9860","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.35.0.tgz","fileCount":14,"integrity":"sha512-xslQkMWdnvuUTso/bSzjfkRPu9IuTMRYsWubVLrTaNTsQK6qUu6NPBK/lidm/y/oCFFyRjtIaytotNlqblqjQg==","signatures":[{"sig":"MEQCIAKH0CiFcrXefSCTKV5V4UqQldReCTKn6OPPz+Y6gie3AiAiQ7L6y+j8Vr6BGb6mkZBNy47ldyt3enNMW3OU3TWCvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDsCRA9TVsSAnZWagAAXO4P/j/zrlXRkpJVOWbj4nvW\nkpBKT3RujTPwik6+96c2QtkNMuGB4EbdwCep09oM1PqU1zKozGBHx0kZareJ\ndGZ+b1ciJ1LDDP/KH8E7m2Q32DlcI0NrUK/zSL9tL5hqdtSc5uKSo6C2sZIn\nEKrod5MFCawdCg+jp9wdiFqvd+UJA/qhXFighM6ZDC9FLzdhK/XSAeDY0k/v\nr0jNDKaZ9H9yq3QzEMAHK+fumWvarHy0dXUGpR6pAoxM3sVWOphpRbp7qXop\nugPwr0aTTJaNXxh6qJQy4DCk9/sqAEVgPOape44M6DgINA9PlXNw7Qcz/kV0\njLQMdmwdmpmpi+E48ThzHQ+kQHdWyCVXhVHtwcv7oQZUBA/ZlaVcDx6J4i9f\nIU7hMy/RRbPusPG016tXahOUfkY1q3nYuS02549T7Red+E+cvE+KQy0o6LiJ\n8tDFyzxXIblalArc+1gFPptAndNetHjklAgKVTBwOQSvgVfa6k4L19zn95er\nIQRVSTvnRyRXsyEaMalmiOcAQqIVp9nuNoD4VKn9ppEt+YwM1QOSvlUgOcH2\nyGKEfKttv4VzCAho3C49EaJ8NlEWg6NLqj5moewPhbPGTNJXEcTJnMFqtMx0\n2oHmXnqVRwfVeGFNfNswtqCmfU8oQUEJ9HMow6zHAfDQB449U4JrJrRtqLGI\nEjyY\r\n=lFce\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `appendTrackMarkers(numMarkers: number) => void` | Appends track marker element to track container. |\n| `removeTrackMarkers() => void` | Removes existing marker elements to track container. |\n| `setLastTrackMarkersStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the last element of the track markers. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_0.35.0_1524523243035_0.2059501010753828","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/slider","version":"0.36.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.36.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"340955e88504402c25c2dcce0cdf4062a7725fc7","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.36.0.tgz","fileCount":14,"integrity":"sha512-WB4j62IzrQgToWrDwe5ssSX/7wUD2cvCNlVkehz0syjUMWLCDv3ZrWTJQhd3K6XE3TjSjtTa5JjhkuezAAr41A==","signatures":[{"sig":"MEQCIFhoyAMXN9IbTAJ2jNi9zXqGkCPlQbVBb03EeXQBcFQ8AiBIYdAlP/GyNgDcXkIT9qU4s0WMUC5W65EyDfP1225hXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzwCRA9TVsSAnZWagAAarIP/RwJ5AR2SDSY0zblowp7\neSHVt37djtSBg904TMCI3DHrsVA5WMchn0MQmIXtyZXaS8M/95tirXU+qsiN\n4cCrpEmXi7wWIKZI1mkXteFsWkq2/R6HR2nTtGBKuAh3Mdnan+C5AHzyQlNc\nbQuImlSFjgHcDvSyfHtj51xVnUuYpSf6Da360P+rtuBEOycNDisRBUqltpN4\n1+bI7483WcTluyxrL2F0tpDRCQ5spoHWblczEyHTXdaWHxmDIrqWm/4cSIfQ\nS6Ej0VB4fHxKzmjOTsj+Ttc5+2CaBhz4qWctmyLGvJZBra7XAw5lhsYs4/ZG\ngyeFo4c2ofBGRxGR7BHrIW9PHVPAC/3CPqwD0ZTwmOj7Svbsuf4N5humFYbu\nV9BTlr9b4tduGD5HgrmJhwBBf89/7cPKKnkN4nNUSW580HZG2w6/v6OpQhr2\ng9Bi24aE9n22UADQp6KBIBUfMOeLNg89tUAAg7QyTMmC5xplsQO9xe0lrM1j\ncKL3tYPOFB2TEBBF5K9HRVObV8Zmds310eYOAmXBbv+Pzp8Ak9Kd+snfJ5gp\n1hHEFZYEbQMGFOSm839adSYJzADIa72d8gcFBf+5rSOXI3RidQGm6IEMsngD\n+Oqa1YEGIloyzhi/u4hf/zO3CiyZNi9Lwg0txgRFyi5S+M9BR/C962y+aRoW\nJnWC\r\n=tuxg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.36.0_1528126703170_0.007963858393532641","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/slider","version":"0.38.0","keywords":["material components","material design","slider"],"license":"Apache-2.0","_id":"@material/slider@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be5826a79765721b6b2b8ecf5fee05976b6d82ab","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.38.0.tgz","fileCount":14,"integrity":"sha512-HF0XPteiS8IpT1xyGi1dYLd5CW3FxXlDKteNsuhroSFXON2CNH+voHdfT+jW1WfkWcDKSthmSTB1iabD8+9xDg==","signatures":[{"sig":"MEQCIH822SRoYFGX1XuTVeYIWm2zU1Lo/FOe+aSGKW8/LrWPAiAFBm6TRh0C5zC7+LfSk6IgoP8JktFPf7rJcfVW7ERbmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WYCRA9TVsSAnZWagAAlaYP/R3V0Wag3krh0r4lw/n7\nfeeoDKucpByyzdCxDQcoAF0RSBxC+0NjfFVXPnC+Ea/PTco6UEEY9EL+VY9/\nzqJ+xPZQblQR43HzCIV9mm/EkOKGcmixchWzamANKYwx3GfQby9nreLfkRz+\nWaipyKE9wPzKajOctcpnx1Qi/Y8Dd8Z+EH8oKeMr/NREC2Cos43aq+HA0KNX\nFiI9JORkpT+l3muruMiXjvRrmPwkvDvDepVDZLxSrSPIU11E1XDGgk7r+QSn\nogLOYJB5vCNa77blXtR5g0ADQrcZbpPazSgyAkG5ydhZ9D7VF9NzHRF3edg6\n+72/skMR6IjMzdvtqOBrWK3DadtNBB8QCZDdTHf221JDo2fk+urp+X613aPR\nu0z+cBqYSq1N37Kjba9u9T3EMDZ781/mRW5zMG+WcNE3OGpptxezC9ynnNCO\n0BNgBS+NFuywl/jqL2pXlFBiF+FN2dOc1mGCOYIoYgbAnPTMc30WWodEIVxy\n3yzjEbS9qTa/La8/HiMcXdO17mutlZHW/+dg1RD1McJkXLxB6tCQTbZ1BqLZ\ne4IeQ/7aQJk3XqgJKAGyKNweV52lOn51r45d1F4my0ELXPP20fezPPFqVBaw\noEbVnLgEfEAfilsiUX4Q7lvfNS6lZcBT5qsX1cUd0hJjG08CDKaPh9pbC8Hy\nWH5p\r\n=uxNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.38.0_1532970392193_0.9854350315114773","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/slider","version":"0.39.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24ad77a3c6284d26e53efbec9fc888b09d68fb39","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.39.0.tgz","fileCount":14,"integrity":"sha512-/IkkneIj3NNoLa/dKQfwIydSZ0B0qfIFWsR2m0AmxQcGQhi8DzoY1En6zuKgScOnFf6FEOymVsw+9DRfzsgNwQ==","signatures":[{"sig":"MEUCIQDH0Gp7qV7d85lcnFjp7ja+V8nNkgThZEYErghBWv2m+QIgVMfntBdaptDXjGewyiuQC9uEl54UAFPNw+It9Vv0vq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeJCRA9TVsSAnZWagAA3yAP/1IesjdoYqf7M208OIKG\nfldXH7eK8CvO2QMm/y4teVnucER/TACiekwxqVz9cpyw9BeyfWOhT4Q8bQD8\n2CD96F3qmXO/go/nqrAU/a1uVom21L0Gt3G3DkmsHZr2jc+rFnnFJ9ZvlzN/\njYYBcZTbCt1Q9fiVYVHT04/+p6c1bmAMD7GJYLQBVHg1JEQvvbGVYFqaugWv\np8USo2dfIso1hnPp2Gj8A3G1wV7cmO5fzx4b3GA/RpOcRCdzzttFPDsdI8EF\ncz+P8r8SOUHu2BlUkERm3aYPwejOV9pXm8pqw1ENOT3SADreSr+9FPlIdAUX\n6Jm0Taqw/qxv/K3zJOpiIqHDj8ikoiKcocxxtOx9RoVhvpnKv9A5NzFGPIsA\nHDLOTomsRTXH1zDkeoZrPmwlSQRiZQEgt7dOEZ4kBcU9ban8YLs/ccO3BrgQ\n5l1IoEBA2bVeBPMvwpDF2Q5n0JGSnCrR6mAf3I5X6Ah8qumfOe1INNo9EqBC\n2d4VQ2XTh7Dk7fJoxEinRYnkM/Ofjl+7SSQPUkdI4s9wgmUP8qc3DSRMGcxp\n6sIAF1Uc9zzIOprBL01CS/MSRHQR/8ldqUEPEEzP21mij8afhYtiGw+Z7/ZM\nk8/GyPIXSenK252ZJLGf9I+RB3Opzfe9zQcHuIadM36FMBCLh85iF1W5iSgI\nAUos\r\n=14ZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.39.0_1535391624194_0.15521103132957492","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/slider","version":"0.39.1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3662f8a3bc9ae353d77b70ee921063162e03a255","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.39.1.tgz","fileCount":14,"integrity":"sha512-pv3FrqLgEGqzt4CoN94SGIND9YyGp39NFIk5h9OruQZah8zjPm2lh7CGJ9UkkMGR7Zpxm44E+eqjvEli9LNniw==","signatures":[{"sig":"MEUCIQDJ/Oo0stJEQ4RFuOj1ll3OOe57kYfi2h9YcMOJ0hCuqQIgOLxQ+plyN/7263g8v0W9jU1yPxRlCIGiIxakDETM0n4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTSCRA9TVsSAnZWagAAHcYP/0LM5cWK9rgt4Z6mN4mg\nvYC/2KSD+2WsEP4UEjXH/fH/0N4/H3DmWwmBKuZ9DH7HjZQSmWA6R+ayUhen\nntcmUC6WOF58ioUg8iKyRGX20cYB4ipU5NaMI/s9WnqBmZE3xydqZtLwJ1cY\n5hd/Es3IoHHrA9unMSyDyjfszgMZNLQf04iLH1d9eiEVNPwavzya9cV7uctW\nYwk+BD4fFBgYUeghysAAqtObE81dxUKCYH8CW/pLaqQnYAvME9BvIownpu59\nlabAQN3aAE4yU0u1wknoycDZxR6oL1Cwh3V5uxiVwT8L/DtBONGkus81pFeL\neERCcmNgtyiyKs3anLakxpAZHDvLMBIBBaUDORvA8YKOcF/CKB16OdS77Bl+\nRFhSgimMKhiDekfC24OYSLKXgqy0KTDFEqapg9+OsnkBOuYiwk0Qt6K5aeTp\nTVN7EiWWMKAf/DyTimi4u7xmEYaeoEwF+XTll8hBvQ4ocNnyZFHE9xt0xaWg\nKoewYyV5MFq1YPmrv5fPEZk8f4TVfxjBEUhh8qGAH1QekLja1OyZrifr5nMU\nYOOkE7ExZCoSRvBumD39WvZ2eWWO8/N93NM+eQLvN0ZJkmyF6wyqa6PZfeNA\njT9rR8uak8EoifG9+hXofQh80UR0gRj6Uu3eU33CbnhAz1VBPidRNVIZ/xcC\nw/jc\r\n=+2Ig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.39.1_1535751377082_0.3622765135309174","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/slider","version":"0.40.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75bd25d21291eb4b071bef122531665688708852","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.40.0.tgz","fileCount":14,"integrity":"sha512-VDneb9reLPM5gtBGsjVYVxNfS1aqOPmmndo4dHflCUJevGncELZ4rxItZLypP1xY5NN/oPrfpJo7GGLzrcIwNQ==","signatures":[{"sig":"MEUCIQDHr6ObhS2K/3tKzSxnmqslofQwMkBupYPY7BD5yW3FaAIgHYBvEuh/gXoCr7N3+tE3UjVGubvhXGnmxyO3jcKocZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJ4CRA9TVsSAnZWagAACjgP/j5Xb1Xe+/fVQNxQQJIu\n4zw9hIVNPUsedd8yIa3EVqdgwd6Ex4yl6E0pbc4DEn7OEigCOl6wnw9ulL4e\nu85V+JfBWTCpMLG2S5AjecOtlXIqbx0+7/nLRhaTCX1Lz//8s+LxF4iguckr\niDLjaOvVICvjchFj7oxDxebTTPpVCwmFdZiKBXc+nAvyteg9lwUBkx/Q5IoU\nAelQ0PJN8JOCx5lxVfLHkcoSceaEKWF6zMwR5Ys/OD3UoCYFxKT8uy+hO0sH\npRSusMGzbRbOBK8dHuLaFINBWsrQ2glg/hHQEVLjrjiQ0gfRwcAQyx0DE0cE\nHNEzsDnymxDbXFIaTkXefzOgXO5Ycs7kDZSewnUP3UptZXowPiUWYoG9mEmP\nOpuxO+OLNAIl1dnpyVZYGZ9QViVZ2SUOeiRokWWuN2D+/9AYAYUJWTKZ07DU\nrMwthaE8SYuNa4XY7/MRq2pcotlAB1yvvr21DtWN3prSsLz5umOOiopmqQiQ\nuqR9ReWSQ/RHHem1nNabDURKwv+vzQZWF0FgJ2dpIgAuGWYFVNWxmGCfTgRv\nLmfkv2q5fXcQHHclnnlCcduw8Y/MMKuyNVHSg3FHz34ygXNfQ7H1yzdHobNc\nQ2iOV4yOo4UJqD9qCPd2q1wZvlixYE20XhW4AZ5kcuDvW7t8DlFuKLRmRNqr\n6ak4\r\n=EDbe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.40.0_1537819255452_0.9215281032460909","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/slider","version":"0.40.1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e177b3252f6d822ebc339a50095a1dcd20eee5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.40.1.tgz","fileCount":14,"integrity":"sha512-fkqGqw3MoN1rcBAIbcqC+f4fOA/xBUDtrqaflaLTK/S6/XJctFK0wwrehyhkD0o+/ayu6SZQenOibUs0bGy6dQ==","signatures":[{"sig":"MEYCIQCy/fPJFep6CFamFaKMezpfSoAzotgklY0ayGfGk+S5LQIhANTcv20Kwgy/6xPGZ5myQg3RanZgcwJ0RtnAC0WNnqDo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8P7CRA9TVsSAnZWagAA8iMP+QFHh6EgLINukWdRMqRC\n1W3qzwH8WC3piHijVk/xUhK1QYC/4mGVIwAHiEIAv0pc+2fT9HufDtm1KrE5\nzqMSO1Pcqpq8GAtNmFjxFSLwZoAx5Pe/vck/LCxzdOSMvpi5eeqF9yucgwFp\nUTeKkg1j32ef6CFzgm2x0LioTOemEqpO02OfAMx50C2e/FtusyqdCIByavZO\n9wZOKDzIvVy0q5JGu95VqfZkmG/X/EARnaRddI9Ly3/7Qa5Bp8Kzdcm8YgqR\nbaUbRSCh2HksWj/nP//JkVfCkjbaWYHX1FfM4FEkmw0RbZLJWygUCLJCRgfk\n5/pvOv0ZZcX/9bGbtjs1tMYNXvAsIaEyp/MO+4uWv9FcoC9W0b5dGWbQghPw\n7QE/CHisUC8RJKiPsVyMH0vryBzh79G392AJABNd8Bi7lhL24eZXh9f+61YD\nToT4iu2/z+VvzQboSHcz9A4e/VYOmEBnxHiofPt/eCIO5W2l1SkWYv1bZqn3\n1DRcq9lc4oKlwrmM2Z3D1BBvlLlv32iuZJfbqrrf9u0dW4bY3mBktyi8dTxO\nG2x0ixWm0kgcGiO7IPONdUWB2h9DWp5qnaKfRus9Qr2cQ9x9fh9cAVxZzNs9\nnst8ocTT+8a8eaSp+o2e8uewq7nLz7kmniqBOX5L9szZFtqGV6dwZDe0IhcF\nE713\r\n=GufU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1","@material/typography":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.40.1_1539032058669_0.39671135429243587","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/slider","version":"0.41.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3c197da7f6f9c4c9b974d481aac3669c1d46a06","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.41.0.tgz","fileCount":14,"integrity":"sha512-u+riWFMeEiczu9bv+Am+28ICX6ba8S55Z+c5JUFtegZNILC76DAuYe++jy0huZw4j/RJXq8hDtj4wJQwvaFTyw==","signatures":[{"sig":"MEUCIQCUOpwXnAsAfjBFRaLalzwZVd2fuQL4tKtHGT0pia0gyQIgCiRpQJ0TegnxceXFhLiPx+qGj7DWpU8svOmFDSBoZBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vjCRA9TVsSAnZWagAA/K4P/2fyOFZDdtJblSlZ0Ijw\no0OYNG8/qUhGTFrqxxwirrKIp9p15+hd19ugtsn9+3JXw+SCmelWf6q0V5b/\n2cO0V6tnJ7IHMBh7UryDhiPY8I8aE70H3pACrb0PaGYEmIEgaO63HMd7uqgB\nROyZmjtnoOj6nt3PmBIVr3OlWs8C0Kqm1tw31N8IXagEcoVDnKJmB/31sNCI\nkOj0wJGgOoXVwWuud/ARij49+3niQeog+GFULAmadrqhLJKmAvFwFrUJ0tms\nsqMGyxhiYSUu89HaDD6RbTYi6qUSV9KcFOK9oHVvGdn0KBEqgmn5kseb6d87\ngXhvfoJxQ33Kgrtebm7H7P6+ixWEeG8v+iFjZf5lFOoTE3+IF1wT590x6IOa\nojonZEGiHnDKTNooLGKC5z1Ot9uKKMEdCeMYoFeeRml+AqAyzCaH57GPlGjw\nXLmSc78oMsazBKcASb/Yrg/eHUcOm3iJy68KGKn6W3HjCnrzeA4r/8mWNSBi\na9GgihD+x7l6YGQrSr9AKD+T9prooWy+PzcBswd4/yG6i+WTlP2dOwGlCs2h\nuixS9VIC/gvoftUuMAMJKZFP3IWyjqqHTJLt3ntpftUqYfIr/4RzRYDpz2Hi\n/JZ/9ABlgHl7yHWJZBcVtRwhWizyLUPWS8If3rcETjlgGCgKehpMdYrRlpqd\no/wv\r\n=qtoQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.41.0_1540844514919_0.5312682060439433","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/slider","version":"0.42.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"286ab7c2074cdf8ecdf5239b5915930046b506e1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.42.0.tgz","fileCount":14,"integrity":"sha512-9vcr6X5Jj4AoLndK0X/1Pi3jmiLqkYcRVwh6N0dIk2MeKujsr6vI3+tPZxNg5Zg34eED/sE+MPj1QjaDcZmtow==","signatures":[{"sig":"MEUCIBvIurOX3kDHr2Rx0kgFdZiRat+2uppmCbMZkyjN3slcAiEAmvA2gLgYPFDVrLXVoG8lpNOesy8ov6TJipCpES9Yvbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXFCRA9TVsSAnZWagAAAK0P/3WPZyGYK3EryK/1PdBS\nj/ejNosxe9cqO+GhXpvvrwbIJeizW2PlAQFxcM7Z5T0jaqQqPMwBFZWw86uT\nun3U0yTv7nAAFYLFJ0i9SXCtVuc94VhjyuCZ7/GBH1vOnNT8Ba3jGwcwzXZA\nbQ2ZFVB7HE1fSI2zscWx0msVJkkR8n8WB5uyCnlGoVLy7r32dlZjsxCcInWF\n3HeITQzR2HIzpy/lQGQzuwJy+sny4azRBTpopsFqAe9chHu654P4904vhSXK\nSdoYlIwwRboZkGreXLe8O73iokUknJlZhwNs1+3t4042IVH2qiClz5oL4SjT\nAfj8uqxEc6AAKusBz/PRsCHXzfcGyYhPmzeTuLrSxaWI2tfKuF2CvjWQvlfZ\n441sLFw+LEO0dTY/uNXFAA0p/9LnDttxTyGl9WrmydOoOGRxLBB4wdMKBnj+\nQRlZ94/PQ+oAqoGJXPSrSrZ4Gt39vREGyGQnWEWWbfkkeaII9PyO1dlrKE6W\niGmnm5FHbtQASr7KQrCjHNq50DoqCh0zNUvpzTvQickuZV1J1XfC561Bic4L\nVvuNy75cuZU0et5tZXNP/yNw0NiGeakiQbdwQurUAbMr0Pr6CPsVY6FaOi09\nYF4fZv+qODNGTquLsgUBMJlaAMPXp3ukRLxoMbKSDv3OKsNTFCVsIf9pMHld\nBGQJ\r\n=bSYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.42.0_1543964100695_0.3321387223365553","host":"s3://npm-registry-packages"}},"0.42.1":{"name":"@material/slider","version":"0.42.1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.42.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7783afb03aeecfeb4e9c89c41469007c682741","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.42.1.tgz","fileCount":14,"integrity":"sha512-ftWntDdkk3fwmZWRQWZuE+1uFv2Y7i3L22IXAAzG9wl75+jmiF3G9q2aM1/JeFWC95TXtHZEZ4GrFaAVhp7c9A==","signatures":[{"sig":"MEYCIQCNA39coUIHTKsFQiaatGTaV11IP1NfabEnN0o8tVe0jgIhAPazmpxzO+2ODLOd90pNzyt0tIK3RXwzWoDSTC9nRanA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":170657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGCJXCRA9TVsSAnZWagAAGBwQAJWnEG3j07G0KeOMPgC5\n6syrBYpusjyqzVE8aNER8C7te04EWm+i6/crVxezFpeq5Xvz+KZ9tpCe2Guq\nJsvEyoE1qpdHbEvuniaJXAeoI+5peH7bh276l2T9EphZ3wLZgzrdo7rM9HsL\nhXt21Mz2aX/1KDFU4HFZ2du1pKOOTnuL/gJ5NG4LXxx72NR+0opVR7SEQESi\nfeun3A468Zf5QutLJoYQAqy87W+qNGuYwOS+iFM/m53dD3pvq8ZwRdwVWPh8\nSVqSwSIwavbjeMWbe/EkiunD1owwz5DYZwCxqVZihSbpMapwWqeQ1x/qVQO2\nnpveiMYAlBhFuRuzC96M99JcUYjK/l46eui3SypHTRhx8tWYQ9gpPeDjHzgY\nPOnuye0ZtGAR1s36HQBhr/QHg7zoRjftoU5PhiGseRChyQgPQ8MZ86d9E0Zl\n2R5k1TwM/p3mBx8TfYv1+Mq3LD/o14gVwoWlSHQY0lSc+Alpr1B5d003RJS/\nq17JfZ29THk4YlfFCKxm4w9zjVHVaHBLQYYozJoTXOQdJiAA4wjFue4sdCAu\nkyOJBid1uImGA/F/Pu0i1qMgMEr4r6ciTnRG8VLX9FN9wcI2tc+uTu3vWJD+\nI1QeMUMbJK6r6MGPXQNOhYy3IBQyCcvILD6UeYHvXP8P2q1Z8+sv00g5o/dL\nkjgL\r\n=MCo3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0","@material/typography":"^0.42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.42.1_1545085526097_0.6316583394237152","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/slider","version":"0.43.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0812b49343bd5605372f36d1361a9c4809d43231","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.43.0.tgz","fileCount":18,"integrity":"sha512-iwAKseZAz7UcIROCTtUYsNQHbt8FsH4s/N6XXjSeGds+X/pj8FkidkDmLZDtGpQNFmfR7MbXIlXssjSzDlA95g==","signatures":[{"sig":"MEYCIQDnZzucHcamUYJBMmnrxwDvx+jxNI+JwqtJbNJz+tWAaQIhALzGEXF9BOf3/itolkDj3t3GDO3r+SuWxg9s98ytYPgF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60uCRA9TVsSAnZWagAAp0YP/A66mxZjIYCm1t3xuDOV\nY+mRMM44vvZR4Ig0DoxlOq4NJoxlALZ4T8I6GGmS6LluG4gJeHeUArLuL7Gt\n1nSrKApD2uP2I5v2VBif12Tfd4Lsbepfx/BbANJqTN5YFND7MFHPMkNM1Zus\nuLwzuV6/oX1WMyIn4tqPdRsq4ArPYp4mzKrrExaVqnOOjG9aAU5I/yFo8SmK\noLVQzWcOtk7Rua+5xj9ZHb6pIkYYPVTfW3Id4Sk1nxrVWDWDh/iT/B6zukkv\n51jDZzf0eDvhK6/H4nzk7yVzAFfwsZopGuMg5E8i7Kcpc5wF+ShdvYAhkiAk\ndP4mp1ay1EjvkKetHvlsQ9zSmU+cvCCitqFSNQo0oQ/GwRi7nSwHdwq1yOmD\nJt8+I1KCnDJcQofeJbelDDxzVr00BH86MjRGcohL2TWnZtpSGhYkPH/NtSPg\nNByC8nwfBGl+SiVOwncw5oxifkTPXUNR9NbQdNF9glLFzn+cyxizn2oQH3BY\nxT/fn0YXw8/PtXUOFWB/B9z77YIr/Sh4bie0uPoO0eS5bCep53KFzPvJ+SdU\nXPAc0eoY8RLYrtp3dk7L2c+buNgf7mni5filFTpZmDmnIHRXjvDqreZd68DB\n1m+EEebyS69+HeUxjH0aXiyIaBzSFsXdxeDYyf0CDIJbYgUzAZ1ig98DuVc/\nSnz+\r\n=3A95\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.43.0_1546890541134_0.8047929093774981","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/slider","version":"0.44.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2055df894eb725e541cde50a544719c07934755b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.44.0.tgz","fileCount":18,"integrity":"sha512-Lnn2fdUesXX4O0UpJzveEuOj+og+dXCwhal73u3l3NXEdc/eRgYxwWdF3ww4MmCZ786EwUmjb4vIc9olN4DO3A==","signatures":[{"sig":"MEYCIQDGM2lebiH/SMb78IexSplRkIgthBPGyGrt7mdsMa4jdwIhAJYD6Dy5r+uqVIMTabUHYNqakWbWqNoV89LYTuS75CZp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIMuCRA9TVsSAnZWagAAQA8P/jIVaSv006VepLq9JEfP\nFgMjkIZmkEhjiItoaah3k/3Uly/L4JwCxZQPE06l+6HUwcPqFD0Ih9I9fYEo\nMGobDjex8b1Qpp2l94jJM4ZLrFqDjAesMU+9uUV22a7+nzlBBFdrNeyYDe2E\n2m5MnkhSaBCfb91AQ7vXbM7njyz9dX2xDI22UEIC9UTzPSldObKv0p8eghHI\nOiRJ/IaDA4q0RcAdRY5VOPEajaI7pcPRjv2mCwhnkvtT7MNNdFNVpr5O0uLZ\nXHkweVg13h/JqKtUWhkziUvfE6ePNjPGfkEmvXkA+u7HkYy/kcuHIDMJyf61\nZ8R2GHlOwHgwO7gvRRzFSjMVAdI9aH6DxBKO7Adj9yU2al6aa2xNyfXV4TZe\nxSJVC9ngPDy1LL22/5ufM+YZqTi/LLgn4FD8ahfSI6N1KR5TLI3PvVzkoJJX\n8sANwhu5V5XC9UU9NdjV7814DyfbvM4D3zVVnNSizPmRl5xMQJgblX2w6P/q\na04o26Q7tZGKBYNvyOw7z8CoKUblACbL/QASA/gHAU9oIalrqdQ1bV3ilH80\nDX11SSPns03PzdkrZApXnSv4LViZZDBGB/hF7VdbBEQGN5bv7uH1tHRW+e/O\nYqn/51gBsQjRrr9SUFrmqFnj/eFWRZOBAgPsAniDaqddgL/wVw5IrWA915Vs\n5O8d\r\n=z4bD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.44.0_1549304621666_0.414040244454309","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/slider","version":"0.44.1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceffde0e70af6f6b583c943f8cf7fce5a855509f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-0.44.1.tgz","fileCount":18,"integrity":"sha512-6sgpIaALviuUQqjSOmcm9APuPZR+29qNSLTFi3kj4vDFb1RXDjdN2uo60/qlWxeOOt0XOuYa825bW8VrJlZO/Q==","signatures":[{"sig":"MEYCIQDKHdguAYV8QlSDEWouucE5hULp3E/Cynmu6jDDsdw6rgIhAOL3zxJXX3tZflvvz6cj6rZsG0q8jJ8ZwmODQzN7RfGJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":449823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIspCRA9TVsSAnZWagAAoI0P/jxbOo3M18SFkwSXId6o\n4wO4Po6emxWhxaKKh7OWW747bDX+oqvra8M9BGzN6j9MjQAFFpMHyUCA3jRt\nz/YXV3yAliKucmpaCrnXO2tjT1F6RewEehhnM8hVCnFLYyIAFB++L25KXtUS\nZBzYSRsj+EzDVOTA3oH7qGcv/uCIuMXdpThqNLO/8ReC00QG4GoB/23EFvVC\nrqPNpXGlgvG19pH5v5lkaViWWuNAJJOMqA9P3kltyvl5SEIe/5/uWRYbBiIt\n/ggMsAtTFzCdspTmAOetSoRQlLkcYVgPuaZ0U6eY7QczMRteB8ASDh3kHgfW\nX93s2s6wzydaWqlvdlDVd6HzVkne61TMvMNnRw3ngG9efrRo0n7yxquwlkFR\nEHbsEvPCh3SW/2XMMDZXI8+wrRcNk6nctii4Xrx82BOG4ei8lUMOCtQox2Xe\n12WIIVvOhJ+sLBeroJhs73JWEa7XMWKEebV1TGJ5xlkdf8DmTNIjyrizUUFS\niOVc+E7ZaD6sdtfvMQobrKT/26uF/Ea2f2CElBCb3vZWHXYOu9RILfKeDqZu\nrRLTb8La/PpNruAKeF4tkKYu8Dxl/tGsopC+faRzrTlzIIMyDbP6apSWm9+7\nECi4szRYsnkywuc3AuPXtBI7LhOvh8Lb4KHt22rTpQQNBr0UfZ5QcepLkx2j\nQIpQ\r\n=e+7Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web slider component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0","@material/typography":"^0.44.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_0.44.1_1550617384559_0.3664881731529994","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/slider","version":"1.0.0-0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9f722d9c6f0229527389ec1e759e29d9092c9da","tarball":"https://registry.npmjs.org/@material/slider/-/slider-1.0.0-0.tgz","fileCount":30,"integrity":"sha512-kuGuDBLWVLMZ3oiy/klqdJuzfVgqOCKrkQlxpbWpVdhVhv5G6jeyqVXKizEgRFSk4xVhmUsXVDE8djmZKIKIYg==","signatures":[{"sig":"MEQCIAzQGjForIAFS8/hAnWPwyJW1idb5InPhplDw6+5IqfOAiA9Z6+FkUUEs1YgYWnE3YfP/uc8mGG6pQOeb3RHLrEIjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyReCRA9TVsSAnZWagAAphQP/0S1nVvHYghjgxh21tmL\npCKR/uGuRuXzgHFFddhgtqHbVVnyNMLfM26bESg3BT2e1z1c871m+Wz44PK7\nXFr+k4M26V0bSzAsK/T8eXa41sysm9Xd+f6q71Yqs1V5I5fTxt8pnWq2rpjU\n5XfU6MNdsfoMEztuHgP5lpT/8e7QjENfSbFM44LwAf6fL1+T1A0OJguh2ooc\nNc8bLgZ3WiKH0AgZGiZU4rQT4yZn/T/PnQWfRs/pw4TUtPU6bKIvooSBZaVr\nSAYehrdDRav+R1pie3EXtoyW8Kt0VNvfyJXHGr6sn5XJtmeYZEpLbaJ/7N99\nNCR2wmHqey6VMgxtu1U8PYBWxwR0vDBt9fEe4JDp/y1Ri793I0+4flh8D2Ht\n1zyzeboCvGG0jgMj614sF0dTqhoWM6TvZfhRpXKNaK5aqrwIzRI3o1DRtuKH\nlNl+h/iziIT1cSKQ3LaHT9/Y1Z1fwunPQxXYJjy4esdwIFdduf9N5PBR7Z9z\n+gAFhUy9VW84hKUsAl+Q7QS15CbIJndwm93USbz5xoh5Yxaaf3sGRccwfTqA\nX4wHQUU4evJG2BD/bxVHuA3fkxeL0FqRL8T+32Tz33vUDwlyAXefb9O2nUQT\n78VXBkt/JIWoy3KxHxMd8EKTDruiLHA+D+eDbokViIQUqGlLGcmEhrrVMnsn\nZR5O\r\n=UKl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `appendTrackMarkers(numMarkers: number) => void` | Appends track marker element to track container. |\n| `removeTrackMarkers() => void` | Removes existing marker elements to track container. |\n| `setLastTrackMarkersStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the last element of the track markers. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/typography":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_1.0.0-0_1551311965832_0.20754409997902568","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/slider","version":"1.0.0-1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9250f6aa132194e314b78f8f30950520b6b507b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-1.0.0-1.tgz","fileCount":30,"integrity":"sha512-TanU0DW5lAXOLZDiUyqqrEAJAISahTJVmQjObbSPwg0xAvEkdqJeL/kjcHph29o4eQ5uYMjlKfV9qgxRj63fwA==","signatures":[{"sig":"MEUCIQCOq9iLQh3wBWItrsfqtgnKBneuPVBsGFNFXAzklGLjFAIgMANouj9P/cRHyLVNrOHFUKnaH6mUIyPfnNVThsuBINA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":562008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbW+CRA9TVsSAnZWagAAZ7MP+gL/5oVdMMd0Gyg4Layo\nCoG3C9dQ1NmGSL3Qn2LUu18hKNmZ4iOi14CZnOmtJqDZh65oerYjTPRglzaW\nOLr7W+qyBO8CuSCQKInJWBCKDKSrnf4AAL8eVpKs96TGhcjwzuhs4Dxot57h\n2Uts/Wy+tcCMLHleZlkaZi/fdbzeORNOaU7Yopx2xu9vLQF1e/mFq4DRi5l9\nrpzmjQim8HKaX4qhqxR61fvQBqXApw+d8coolSqGtksaR3PUCRZtwX+xKfRy\n+98kE1Eaw277byJmVKaHQfLXTYoB4Y+LmS1/yc5UYYodqnqs/hmnsMTH8WDC\nCmY3h9R/yHWsg81OO5+8rg2wasClc0amlSotpL1G9/QXnSV5PEWxUAXV+Tar\nj+GPfYnB5sfD7bL7t32sN20gW+x2lxJaArQBkDvEWXrlK6Vg6FWufRE9BCst\n4PyNWDCNXPVl8Z2KQ4QlTHj+WHaukC5Jx1ddqV1OztL5HvbWH1thvXz3fMxh\nPKo3pen8X03/LbhnCwQUkb3mfgPF5cu9jO9weHNo/V7aStU2SJnmn12BZRMf\n1A7KsKG8in4IrBD2irvtJTt+Pm0EbfXLSkEg5jkkwl59qySf/4AiIUiVYO2T\niXXVBBLO9JhC96j3nPmwg0TJLHAW7APu1dGC+MfmxbhA7xgyuXOaDJWT2XV+\nSBHI\r\n=04kE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `appendTrackMarkers(numMarkers: number) => void` | Appends track marker element to track container. |\n| `removeTrackMarkers() => void` | Removes existing marker elements to track container. |\n| `setLastTrackMarkersStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the last element of the track markers. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/typography":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_1.0.0-1_1551742397770_0.9167136208243374","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/slider","version":"1.0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5058cc89f0109861cba2c70950e9d762924cbed","tarball":"https://registry.npmjs.org/@material/slider/-/slider-1.0.0.tgz","fileCount":30,"integrity":"sha512-34DoVKWeZf9tnHjWU7Zmbn59vSh3NZ9Px7dQlWeCek7p/27hQqK4Rd2SjuIK1ewV0BYpboS2KcUSSyB4gcScrg==","signatures":[{"sig":"MEUCIQCXOmLAdVancuqOnzYJ4Tjr5hzYC2oKVDleJyTJHH9E4wIgAIb3i5pyCKI5bD+CiqX7+nyQSeZk4wk3841E/3/Djps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":561998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDa2CRA9TVsSAnZWagAA+lQP/RI+IiS6SDZEMpzY+J2l\n2jp5ASdQdYmP0Dw16DkicTUmmwGS9azZ3Emod2EXCnfXoOaEZdRTnPAqcCFs\naI8QWdk8MlsWQUMuD+OueqooalNNOYaszxMzNVlFXpzjoDkVjw4dS7aAskVe\nHzhHaugFFHjawY3O8oUS8LsMvuYAEoaRrX0r8wBvdzWtdiqf+fU2cvSFz7/S\nUQmmP7UR9Q4uEpyG6kIgC7RnlYCHND+Gb81/7NOcVEp7I5Z5PsSdRto2yGlb\n+CA5qfRoWTDm4zxFUZbMAB2jYeWzEIE8rUksLoCSV/vuzWov/2jit7Y3WLTa\nX83700iCeRcxSfgrecG60rR6NXqb2wCOHudQy0Oh+4xBxOZlthM1x9S1vHcx\nXbK0qxMIsN6PBWfQT7UDiAhGGxE3P0pZ6uaMtTQ+23ieJOTpWGBLAXHp/+Cr\n/MEecJw23ohglXm+JLXiTcPvPiw2sKVkBnwITYo6Ox5M+OwXKdrXP5ryqjF0\nn63huFj8PiRDPRlootBrgk0jJ3+0FDJbdRotoDhlwAeSr3EABVQADAfFGE8Z\nO3vWUcDFKkuHCleqbq7awf65MNnDVKjflXFxhV3z+VVdc/e+cdhWBkmJ1yye\nAiBOkSnocaZ7A0lvBCvOLL5Tsf1/wPMLQ0Ol96FgPmUG3SWyUW7+EbLZoCpl\nI+zy\r\n=/hZL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_1.0.0_1551906485440_0.6172477077705327","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/slider","version":"1.1.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4940b345d80e2b08d68ba284b9f724119a0a8e8","tarball":"https://registry.npmjs.org/@material/slider/-/slider-1.1.0.tgz","fileCount":30,"integrity":"sha512-JV/Phpt38LUVb2sQCr2pBsf0faw0E5LI7ag3dNF3hDq1f3F9Vcu+a8oNADi2M+TNlyelltAMKnc9guARwhDLKw==","signatures":[{"sig":"MEQCICww1PoRS2Q2RVCRtGzhmBJua3oqOuCuh4Vz3PXRVvZjAiAi1/oTUFO9U2d78F83xwpMpBhgzT/tWNUdnSetitFahg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":457844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmny9CRA9TVsSAnZWagAAukUP/3a2grK0ZfPjynvNZaFg\nk4B6Jig0Zh/HkSvAiej/TV/Th67Si+IBp6AbaSKjpUopZRvoVOLfmLIS2JeA\nZW90YYotd1pq6wuCKoTxZRvn7dJsu+rHtgFXqasPYxLt/zrgF8lT3pDfnoNj\n8ElArWegbztBbBnVODECaDK4Yv4FO6PYuk3Y3myj6gE1xqnBt5VKau1qod7U\n8U8DMsiyaEpaciyrY1LJ0uHWiqnSaCgbjTp5YsKNRdj/qqvVZ5kaQWXHTKcp\nB8UvMu4Of8scsOkZh2tTVecSqBFxnHwnAA1dYR66bkx2b/LIGcJREwIdqm58\nHrUNdwblRMaKiphUNdPrVkr/O43X1aqPv+rJj4ljJ6scQ8ZakgDhtkeJgw4s\nSbAgh7jpBZRZwqcYQSE0Qn7gIUdvxtSHMmnxfrEMKDWL9LyPZE7LNwiCMwuh\nw/O/hFQTniFdp0qqhfKwebX+X9WXyq9rgwKWuWfCp7HgDYetrm+7Qf9bwSri\nRadCLzVxZ7mm5E3HiGsJMshsu/L1tYofbkcuMSXPCOmLvUAkLRGlLdUwsR1M\nPyHak29WFjguUPM7C+WHBvHbJRUFRb8Omg3fWQxgSrJ6TvRVhB6zmsjXCT3W\ncQwrGTsRh7V982TWTcz6EmpmOT0LmsH8muxSlsSfrOmX+BAF7vPJ8hmonTtc\nKEJP\r\n=M5AX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/typography":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_1.1.0_1553628348268_0.37649957101828213","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/slider","version":"2.3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf8c17b0e51842c807f26eac0519728185f2c9d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-2.3.0.tgz","fileCount":30,"integrity":"sha512-TlSwQ0d8ciD2qsZjrNrj0Qmw6AWlqkNJ3CrXVyqeaaL4JzS/oKKk7Ib83fJbwsSSeK6ipH3zGM7138R8OSj94g==","signatures":[{"sig":"MEUCIHN3rePaXPmXtjahKGFsTyFMSsNMleeP2wchslezOHIWAiEA7Li9VrFqKxySeEXwCBNQ+MLxIh+Xzah9wyFdiPOOV8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":516538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abyCRA9TVsSAnZWagAAJBwP/iosgk4j5cDDr9wec6QL\nkI1AJlSaq0D+Ngt8oS+I0EtFfmlrWwjOf3k7OM1axmn/gBi59voVCkEyUbjM\ngGwqkulcSO/7HhdOUckhcaDH5pbRW9yz72+lwh+BPEKN1E2oHc2mIXTfz/T/\n7//ZhbvNrJjtoCxbgUMBKVUtIYLrisDRfo6kiV6LlUB64Fhqr6GRvSfMUvtt\nuMQJf/wTVjv0hrcK6uFdyAW+WIMEGIx8eOExXVyzzQQyn+SKDc3pLaMX9HMC\nXvGZBLrJgjCqspZDEOrPEqsf90a0XbsoCv9x22dXzlh54iZU56s/e7TTEaVT\nJJuJ7V3S42rwDHLsM8VHTH4f7AJqBCzLrlVDd5nZATlVAlteCSwDrv7VJHTF\nrpSlwWuiKnVmUoAxIZRFM9yDc+vPYIwfTVInEydXavdOR/iovnBll1Fuyzf9\nf4nC09LuLhjkOfYYLJX/Je/EnHl7qMXvUQCxO8wCiLu8/wYyRpp9v7A3dPSL\nIb4crA05ca/elEtMU/S8XEp1mac4WUubKZLhEVCmQpwUOLFFPUMgDYz19Hjr\n5lNqIX3+x4GOBmkB8JVdVKmzk2iXD7APGxox4wSWiksIW1Yk5h5FjZKXRIh4\nrHnLal8jY4LSOzQsBUJDhTHInsU5DI2zOsv8rZEEmy0KibppqbjpWfomYM1n\njSnU\r\n=mInr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0","@material/typography":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_2.3.0_1559078641298_0.6636617900879684","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/slider","version":"3.0.0-alpha.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13f17e4e0041de162ae08e1ec3f4f5635c1cbd05","tarball":"https://registry.npmjs.org/@material/slider/-/slider-3.0.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-9MmJsKGNjYnyBVA76EH+01Kkvxam/ZQoOCHdTXE2FYcAi38meTkpUms6WA95EgatzfvW6aYg2zNC5H2d9Z/RhQ==","signatures":[{"sig":"MEUCIEg/fx/gdt1sCEaS+4aZaf1RxJwF68vqlyxWsWAiKlrlAiEA0/AwPKrxZuToan5Xs6qxEW2R2aqfWJRIsnuMiHXg6GU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpXCRA9TVsSAnZWagAABnEP/2JNO/8lYhuP5xvgnfgc\nvScd6p8KfuHFuAoEXEgPjXgnWjqlTMTAwFVL6vZzq5cgcpKdmpPECf2ZXI5U\n06TeXMD8S2tpeMp+s27wRmYbxTiSt8DQ5YCA/b1tD9RJA8KeJO9gcqPhtnRQ\ns5e9Nyz8jBSnVMw78IdS+MiqcytcB9Lfa1YtenuYV9rSRNlhBQt0sdHjirkW\nzLfhEn5QdBcjtdU4J3cABWe0JtpkP9gsqStlw3s33branPxLXrxgEFGBVcQ6\nzjGjKODc9G+puBtkkyq6fpGBPKdsMKEjU+07hwGqf5cN7+8KvrugK5uo24Qy\ngnG2hpR3BKwHaRAYHBzpndVUQ/T7Jqfcv/hlU3Lklkb1WDtaY5zXR00vgdmR\nLtZKrLbazNssFEegKzy4yWtL2PEslw6pg3q0gpqH7/uu8mK9qobD/I3c4ABI\nXuGnfwOnnT3IMvLtdIcYtevebemMjtnXU0gtAR6zDJREVAiRwT8VB6XdSs4+\ndf4Y527yynQCUz+W7TWYGIRIJne+2jjmyfKOOGDmBkNxkJCim8mAluTOB7Pz\njHyP+O2Wz/AQ007Hd1mD+DTukHtyejw5c+ZM5qFwfS4LNkMxTnkz6cy8KhCt\n3uIsVEGF16mSmiOmxCsbltU/0L8w22svypkKjF5iucPIBW+FwgGJjYqXLgs8\nZWu3\r\n=DHfW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `appendTrackMarkers(numMarkers: number) => void` | Appends track marker element to track container. |\n| `removeTrackMarkers() => void` | Removes existing marker elements to track container. |\n| `setLastTrackMarkersStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the last element of the track markers. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_3.0.0-alpha.0_1560312406323_0.5419733310159855","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/slider","version":"3.0.0-alpha.1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4dbcd58480d9d9e122c428c9398eaab8b6e1a9ff","tarball":"https://registry.npmjs.org/@material/slider/-/slider-3.0.0-alpha.1.tgz","fileCount":31,"integrity":"sha512-O5nbkBUgTCJdzu9eEb9q2V9X+qQbSqu9HfTHcxwXjX1Pgd300lX0PwoWWGKmLap20XqhPnYfhRBZOogZtVIuyw==","signatures":[{"sig":"MEYCIQD3Zklt8NA4OW3Cp9GHc/rWWdc5Osiwcnpzl9CU3fj2DwIhAK5XYyuAeKj+frmWgM/2acANFQwutwefbAxc1pmeOPtT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":517701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwzCRA9TVsSAnZWagAA6kgP/0cXZ8Rsj1UfW/tH2zKS\nG+FKZ3wZZq2elmJlpzu23hG8KF7VaEuei4h/YaZhPC1x4MKzf5XY4jF3LAea\nANCGnnpzLdhZ0dtoI/BW9LUGMJPdsG9gor7OdKRQOwoyYvthzwjnpLHaOqLi\n6yYY1xhNzQrvnXgU6aOkCLT5a0QYVxgXNDZFjYdUwGvcYd3JFbuUIQCJOrWp\nVMLX9MnURKxgH60ukaXrdsWJzS+nYLIMznXcR+hdNeFOUZevOyYKNEvhw2GI\nTBfcXohw1yQL+82UkJ+UEG+bSUP8FtjSBymykyKkPrfhX2iQRped3FiMvyfO\nL4GOTBa1RPXUID4CacTAGpuSkRjPmBvL1I0cbm6JFkrTTeh8oYLK19rS72QR\nCmUf6Msy0i2q23i2c+9p8dbyUJ3EMY8zwXboX/uz74u/D2ejP/oZVlsYTJyS\nx2PfKirtdfrtYcyUxkGhLLKdi5vYFRww0rt8i6NX3K/eyC1tqMAOVzHpNGEv\n/VrVeTzi0BtnqdSrgzEsIIbFB9EZdZr79h4PXIUH6sZgP1y7hcl2MxljS0JM\no9u0lOuIc9Nw96Muv3RlD4uKsI46MSSuHoont11YPQbNhDA2AhN0L2ekv/p4\ntFnnqfvmzXiw41lMYecKgTXt0wwaW/g/4Ikv9Wrym1abPNsNm8vQUZPebUU4\nRSmN\r\n=fGAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `appendTrackMarkers(numMarkers: number) => void` | Appends track marker element to track container. |\n| `removeTrackMarkers() => void` | Removes existing marker elements to track container. |\n| `setLastTrackMarkersStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the last element of the track markers. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/typography":"^3.0.0-alpha.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_3.0.0-alpha.1_1560366131057_0.25485797223341056","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/slider","version":"3.0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa11f1b8e724dc2022587d723fadd5db411014c0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-3.0.0.tgz","fileCount":32,"integrity":"sha512-XBKR95qjRmDviKVD9wJPqz0oeEe8mJMiaA4hgXb4NFaD0IODBudkvXY6tkTou+lD8vYd0krNmZoyVSbTdjeQUQ==","signatures":[{"sig":"MEUCIAJgXwEm7wR7o7CCB7lpNOumGlFntIWjmfgmuoSvmO2zAiEA5bP68KVAfh/A6FhkViaTr9/ziQ9kTLQCj9+yrNR1OI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":531939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/pCRA9TVsSAnZWagAArHUQAILuna0AuW3+VYjLSScp\nrmIlgOJYH/xpyi5XJr+U6hQ8/2zMG1PxCdPijxFuruMF5iQzkxJkRC17tENa\nOe/fVaGMNQrHgiNtS+vFClogycKl69RO1qr4uXBjfJtGo9LrvcoJdEjIc8iU\nidZVTrDkye6MCh6PrqMZU/7etL/6Axgxl4Vo3yEys/pq4VLU9qTodvvyXleP\nE/5HeC1McOhql5O89RJEtcxz8vJpFkX64XgUYD+Yl8QFkvTTWbTtfds4Z+qm\n++kHWnU1sQ/BYudBa5lWGcdAbwxHGqu8J/8L8gTCPU7X1P/gk8qkVvjYknvc\nROZkuDRG50QFP7GTvC4C038LHC862KohlLhsoc8KORSlDzRUT1J12pbQVQe7\nMPtE8KcdiePoFTfE3H4srZfBPiw5UPuNBZ0Ozo4DsiP+BZu1qYLQqucr0fTH\nn/8L84L4FjP2gl8jJBsd5NNfuq2eJClUMNh0cmg68PAxZ5Po9pIL3XNT3gbk\n29AM/r7MmVhedezI5UQGufjV9At0G2UK9l573+KtE+V90T7vNa3wvLYTFRhz\nvCjP881g/fXIrBOoMz3p4P1dod8lh7z/oiRQH/tBhwjWrR4vk4GiTPIjiIhL\nnvWoN+3X5FmP5Q/GCmiEyB8z1MYNbmF08GLH3PAnmNESeDl4PGAb2gv8Yphn\naV23\r\n=OnTP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/animation":"^3.0.0","@material/typography":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_3.0.0_1561501672883_0.15212568897201528","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/slider","version":"3.1.0-alpha.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac4d7ebd673880e8cbd57317e960fc6157cbbbc","tarball":"https://registry.npmjs.org/@material/slider/-/slider-3.1.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-ObtEhCqwQ2tURGiP4zR3FcN5ga/QvL4/Yyk9TzqRWtes1V4W8EhTUDtctLPVfribITGmKq0WH4zYDTcnr0SsiA==","signatures":[{"sig":"MEUCIQDJc7QBEnOKNNdrtmlbkcXqaaUtSkTjNjCByCgqYaNntAIgHYK9/HOG9+d9tsMXlhAFr+J0RzmNwGHU/I3xhX0Ys+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEjCRA9TVsSAnZWagAA3ksP/iKjSxaG3Ve87MhGjHO2\nnN9Pf3UYZ+iSMs/+x18NulAy3nh3/XLGn8TMieKJ5U9rXadMl1v8n3Z6ait5\ngsJTVy+Sp/HzN1UUJbR8GHwRApwVxBceDRbzVwgppk3fg3INi5zhZlF3YUqI\nx6Z9dgrNm2nfqGcLwkyFS7Vjd+BB937+fgbX6AheEFpmVGM/y3zLvNQodv/f\nFLYaNMAiFofKTZ1beO1lPMR/eoJacn+mv+sERXF08Dy7OaDu0uyxEz35pFUL\n7tALTuqSyGRxl5vFs60W6GXWBfDKUaKRtcdcGPo7Ld3u9nFyRCEKH4YxEiw1\nPPjIGvQD/b4mc95USRpDvd1h5fCR5pLlpWd9w2PjMnmSu+tI3CtOo0Y/NLxS\nDpMNRvbkH+LnKB7tSgkOrrt00dDNFSwBUd2W/aBQOtyJvhD5QAmAn/8dcTr0\npMEIA/YDvGxvdyr6gMGwBp/tFSijsUninBE8vpQvP79g7K2zatbhUVToKUfX\n+4Z5ltV3nTCPuVMLEfvXVMbyA15X3XDjmjuX9vTcvs3k4SROD1E80QCnh87g\nEnKlu6j9JkPSpBxnNW+Jy1kXiZsqXXrCuY2ePwZkh4sJDkFRMnG6qdxjDuDq\nUzRH3UiXUIAOqNfADCtmtr44pXk0kow4dAu1P1VPAaiNmjAd/h/f3J28inRo\nGteE\r\n=CUPo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `appendTrackMarkers(numMarkers: number) => void` | Appends track marker element to track container. |\n| `removeTrackMarkers() => void` | Removes existing marker elements to track container. |\n| `setLastTrackMarkersStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the last element of the track markers. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_3.1.0-alpha.0_1563283746518_0.5398889187918452","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/slider","version":"3.1.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76f8352c41fcdfc163e13f59609a868a3e77b825","tarball":"https://registry.npmjs.org/@material/slider/-/slider-3.1.0.tgz","fileCount":31,"integrity":"sha512-rrkiQk6zC1X8YqUhAcQxPArOq2+wkxhQZvrHeyCqjasX93RaJAuflr3/FZBpwR02OR07NtPvG6NoyEq1nvuKhA==","signatures":[{"sig":"MEUCIQDxenPwh2CET5SCG3lPX79i933GX/i9MxNAjvEFXk/qmwIgA+zFCxRZ3/IbvDWsvwPl+4WGcjEMQ2yftY8Vh37R+Q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJ+CRA9TVsSAnZWagAAzpIP/25HhH2JdbPjhvOviYaB\n/YGStBk6pyCI65c0pgq3SDLk4UmLWjwnBcZ7FDQEIWVsOrJez4IdMZLLppfd\n3a1Eh9c2hlNKANkpqlFWh/5VOWibD7CfQLv6q2D7Pr5kCHzTPr4iJQ/NVyuq\nuaN0MbckI7X/2cbySnlaBXBljrgKPo2HomCNRdPc0ZoGPd1nu2H827KMsLk3\n1dU9yLMOgLing6AqMBupjpISVTcUsVeNyS85yUmGxWPie/q4AEYUJPl6/tVJ\n5WGI/5z+ODTVJmm8mVqKXa/2beChvRKDvmSicPvoZPk9hR8FMhMkEyNkawAz\n6w5LIQAtVZ7+czzGGGkopq8zUWW1A56ofsuZcRDIZtq91WQKdfupKywPglg1\ndCXOxS/q9GpnDVsVjNLLygnnMxn52jhpZHecG8KbB1i51wo2rDC7tXCokc5B\nMl57v0IOWKStSzODjhPxt3cKEULXPdzJmN0C3YMAS2gqdMpje09vXeif0zR6\nbuqAC+PrfbeI80Z1k0FJyf97z0NKjQjzj2vVW6mQHvYpMFLV4q8j3KBJDyuN\nAagLdtatS44vDnT+EuBz9Epp70MLzcHyEjdEOjth/pGVNajsPIK2qKBjTiOo\nk8fuY8/WBSq28in+D6KGA72aGCiHFmIADgXKgz6N81sInzZknPF2T24ruSXT\nlL8y\r\n=F7Ka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_3.1.0_1563832957614_0.3211448939921713","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/slider","version":"4.0.0-alpha.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef107137e67457ab0ea13e165a91e24fded60d25","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-alpha.0.tgz","fileCount":31,"integrity":"sha512-Lam6B2SMRDwJmSG7/3nDong1o7dfBWQcws5Cg1HTflaFYTT9h8ItzO6lwmy5MRrtUcYe4dO17sL4Wuu+nv/npQ==","signatures":[{"sig":"MEQCID0L7TlT+LheoBq2mrimV7kfQER9e7yWzC70e6W/v03YAiB5sXGRHIa22X7aXe/4S5umXoOrqtY2y/8Kkt7GMc8wtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4HCRA9TVsSAnZWagAASb8P/1w3g/Qa7ZhXWPXuqaIQ\naJuavEWOuPFhVnk2jflPcz0TdRMOdXvC09FcedMBpS+YirdB5QEZzzV2G4bu\np+Lj/VjcLbNMSMxjOd5+mx1DwP9FfTOGVRqvveybawzvpeRcc1GLAezGHq3H\nKKYhGyJC9J0E6EwhxaemGJ5xCfJdsAQPHNNkvkiQPW0OhNm9eqcaRbyoeiTY\nSb96MqWur93f3mbJdA5vlMHzBDoxCFC3UeNTBR2JL2bZz68aF84gXMRBoX1L\nkgv9YnXVuqBgY6h/ccvTqeSNl3K1VNr299QukOjXuwy/3+lfJLRLyljQqij+\n2AVLBan/Y3423Qy+oIpSl1GX0I0oYykPfjWftoQaClM3K8obeao6e4+dK40i\nVpnYhwhTqzAQ+lAYCFymlcyeu1eXvKSvjXHv4R7zLJYixbpvRNJOAsIAgYBn\n2VbjTvrlqA4yQWMHPEtgWCiqLQ/7igH5Dv6tSiz1UMdaZcUQOuluUWFYLbPJ\nXDtQSTokhVczPUhc6Zgah3fD8ujVyPtrD8Ocm/Wr2MmLA6LxqWlpnQhU5vry\nzFBFgoOImD4A3sUlH8oyeA1ZY/dTeAK0SAchWlKHP9iJL0EKii6Sa/aVY+6D\nyA6pF/J9U2JeznsoMFwsQayfZykxA3gU1A4UhA8Ef5WDR6GTrX6NkuC4O4RA\nylQp\r\n=C7QZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-alpha.0_1565212166715_0.39707999838772867","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/slider","version":"4.0.0-canary.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d43265f6d21f136f86499256455c766a3772ff5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.0.tgz","fileCount":31,"integrity":"sha512-6TtCj1Wjb6KxVyiuOIPBeyIm2+rpVD4n+UwirwtK2mUtZCfyT6MLuueeHzPPVoy+WsSN3qSD8z2G6HtlVwGAqw==","signatures":[{"sig":"MEUCIGnFY/p/oGadHzkG+ccm7BT8Ey037TjPQl8YmbHNknApAiEA337ux87fZAZBYsn+hk0F41iaq+U2YRsVBKLILMsRS78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEgCRA9TVsSAnZWagAAOUIP/1fKqzIH6FIeph50SE04\n5g5CIE4rdxVwcyFQ3Fvf/aneBlgqESUppSonHguO0YQ4vAEJSxnn7E6YjUuC\nUAPkxAYcE7fl4y/ufrA5q2hXGK7GZnwsDmOLlHtkCeEWibmqTzTQ5CipJD0C\nI3MIzmFHDYrxeOKdfydjgdFfW53mF+kz0C1l2OxX8S9QPtssQiwugOi36MW9\nJ7v9Uu1+BI1DlpM+CFwtelaOn0WkP4VdXGveqvQTQexp054zxc8zdrp39Pkm\nEaGhK7dk2aBIvqZ5cjyYH+8pyxH+UwbZ0ZsS83fdhXPyyPKrDtrOUFYLtENu\nn7N/TcSGZQnGvQKTq08kd3+0mbnD/1HROawGOol00+gUpZvsjSv3lN6oMy2T\nbrk+bfM7TWQuB9fmfWqSEhWU8lb4rH6CeH1ixpxpkGgY6gyAadGOfltUtB7S\nRzKpkHDoBssIzaKLTrGQEj/04r9BQX5EFiLj0/dFvbNkOM9yVVDpWF9LyPav\nT/xtb4prB7wsIbfvCcvp98KBThqFSXnF4FB5+RVRC/4ZRwQ6DDi6QX48wnU7\nbwME60dFS0H3BfX5ZprU+RIlLkkzG3Hi8N5Zbk9GTWskfKGgS0/usS95Tqa5\n0gsNO9a4DcEmxVSfYrlGy4VPxtEdxL1sFx0MVUe/aieIa5Vac/YbuLgvXBqK\nf3hv\r\n=1Y5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.0_1567658271596_0.23624112088121674","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/slider","version":"4.0.0-canary.1","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eacd79466516322c2a88f9fb2faac0e7d64a63b3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.1.tgz","fileCount":31,"integrity":"sha512-lkgsvvz/dFL6AdWkOxzJ8DD2tcWCZtJ8F4yG+ZEbZjndxJ4HAPd0p6FQkdfGWSIWYwVKM7RfecSx07I3vyPYVQ==","signatures":[{"sig":"MEYCIQDKsJPT4l8RHTgjPlGsR2wHK/UxutZ+NzD3LiTKfhbZvgIhAJPlqHh4EzG8eXHgj8LsP2A1bL7bht60eX8IOCsvTSRc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":352330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQeCRA9TVsSAnZWagAAGygP/iWVZIFqPTUKzEPsDiKr\niDUy2UBDqb6MFRF3pMY2iOpT6FVRNIyKHmMOxjWqK80MBJOWZ5JkKzE4SdWD\nbFdL9thB208c4s+fzLmRlGkIx7BitWLDnVrpZiQdRUzinEcyNdHwIqASEWh/\nJvY8ihHxT4U+yPGNtM/7rau/4ZigyNwZu1MNpoMuWob+rJm+Ue9lJQKW0zNH\nj4ONNs4m0pHwQOXktO4wqwmnn18s7C1rBA+ZoPx7JmQiFc73uW1wa4GckoO2\nfQ9efuTvgliyTC/Or8FuBO6NKnRj3+Kiyx/oevhe/H3D0GTZSV1yovE0Uoof\nDAkJYZ9+T+AFJSlE1Q4Dc1r0Re9DxDp0OKbHZJBqI1JX98qGP1wxgNH9KrRO\ngQ8KwIXOiP4tUW5tcQPnB0NWx6G79mJ9Xrf1aunRJheB3X42qso0GV/2cipR\nq+FYNNsV+KZgga77jXb1C+5DMg9/gN5KvSTW8QfuBrCR01Td8MsYoiijA9Aw\nsxUrkp44W+lBtSTRUD092wWjeyR/Yy9OUQN4S8nbphAYvfKAOASnX44fIcef\nCkUwg0jRokwfZBwD/4BfRe1jqplAL9usGqLsQraClJvA1zTP7XH75nhmPj/6\n/5W0egBhL0vh4NKw8hffomGutqfShUO4vwS5Dn1gr6EPAQFz3KBhtyLvoled\n9NJJ\r\n=XI7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.1_1568060446154_0.3683735193201101","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/slider","version":"3.2.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f7adae771b0ec546383eef7213155c52eb7a99","tarball":"https://registry.npmjs.org/@material/slider/-/slider-3.2.0.tgz","fileCount":31,"integrity":"sha512-8c1u9jfulYqTNtNgaiZnAHyLDyJovQ7oHms+tzLaRV9rENT2pu3Z9H/2KIlpYkYx/5DI0Uv8ogC3s2+zzMc1Dg==","signatures":[{"sig":"MEQCICYSWuSOcIeeEU4NHvbK+PLprYZI//riWnbink9HmOiIAiATuFn6DhDpTeC8Go3ZiPGQq3bPEoyKtOhn/OxAij07MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":359938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5qCRA9TVsSAnZWagAAKzQP/1Zpd78dDqKs99SzIO6j\nVE6kAZXr7tPknmA6COHQbUgKaLBz1JpxQvhb84NJUuUHGJnqmSZxvE/spWL6\nkFT9J7hOEQ9ULtGXebQamqiTSuHyVylqnItuULc9bykyIQcaotkcDxABxdq2\n8qCkvX8hIHF+F/uJTI/OPQUaHcZI+MYvbPHhrTVvQRR3aGw1MWLT9dCA8uVX\njRtlj/NbQlOu7HWGcioS2MXNqh76XHNCIGp7kWnsgIQ1NSfsMzYGJEx/L7Ur\nnvrx5xJitty5lMu2pM7Wh11WFcqsm6lMhzjIZ5c8qp4s8ekGPOKg9OCUcpGH\nkdQfhbAPSt+tpJdMkLGWHfraEigndaf1h2OXBeiudHZ9wxBTaAJnlHXbrUkD\nVGOKosx85FtfHhwkeBGJzGiFInWdcvweveHSZ3iqSiz3tHNZuDqKMXVJmOFc\n7pm4cr+BYEoqnoNlwLEDQC9nQzTFqPxt8QU9S+0NgjfjmEpf1SoOU2imzmMO\ncl+iZt8otmIpSLMSvHJJZqQrKM42FXJAoO5LcvFSiGqLEhursgAtPH4g1aN2\n4SrTpousZhwce9gK32fFtaXyA1kkTRPiz88WdB7NYTSsdE2p3DoAEddpmghv\nts293yoYmaIe2+uQi37CBnqadxDgQGhfqNndvH9YbvMV1F/wWvM4Hlmp9LPg\nDnrr\r\n=HxV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_3.2.0_1568325225850_0.9619785480366148","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/slider","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee911bafc32b0f51ade90cdc397f701b8f92984b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.79d881baf.0.tgz","fileCount":31,"integrity":"sha512-igQHQ33RzuzEL6MncKTOfpKXBN1vzPYnuFQ+R3xRgOd+bBNpNpjwlky/KQInKl6Sihqr3U8I5Rz68NVksQnHaA==","signatures":[{"sig":"MEUCIFUABAWsnbQRHk1POpIdNC+8FOwuW3q7sWRm5W29a7mrAiEA+Op2WvvBrcDqmGEJGZtCEfiHvk51uoBhSs/G1u84L+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":356200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0vCRA9TVsSAnZWagAAHUcP/3dAcEOcYlIP+mk+ap0W\nNMYIYta8EEgeF958zn7xHl60JGV537WCBTnvtKNzDSdWih9EDYXI7zFcq2h0\ne83jyidBAY+bC2ChrJky15v9fRAFZIepPofKSQYtYOWw229gRbN6KBNDqA3i\na8e4ScOMJ+07vIjEO1YytnEkvhenhxgUp+HDAeXmEo86IjZo2OT48o7JKCfP\nteg2TAPQSvqs9Bn4iTAR6I1Pu0IBDMz30HWPsPG72o4oylIO8VKC0xH7pkjW\nASuHkYGsw9KYBZozz7HBr8nHocfixqdJCpAo8+rNpopd6R1RunORNKzRj5nz\nZFNdwG23gsR1M8TRCul5digPtPSLe5/McAD3aEX2Gym9tIogwKXDpGSBRY47\njIKB8rRUFrVOTyS0hlAD8UYUSYOaHiwLj5P+JczZTdpvh9I/qahm32o/r+9A\nA+yLeizRR2xZy0cYwTq1t7bPTROvKPAQ57MRvWH4loUyPEG2qu6r8uCxgyK/\nNCeosYl02BEtV98RHjPinBJyBXX8P/+vRee9Id3H7QyVcJZ1LgczA9tRphJw\ngHsjyecKl92GwNlIzieNfvVKppDDmgOl5OcJl2FXz2bxmilVo/AK5wsSbfhp\njSJa+214MqeYSfpTXOAtQrHkUjUy63vUH/OkqibtMb3p+50aCj7eRgi6e4ep\nEtMm\r\n=CKRB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.79d881baf.0_1568341295047_0.7679168166560661","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/slider","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06aa2e3900f29ba07182d1a79b44be704a6a28ff","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.e851d4f40.0.tgz","fileCount":31,"integrity":"sha512-CVNrgoML+VCmm1o+C1bUWtzyxzlyIGMKCUZuxgBwwfBKiZ58pJvRdYwQJnpdMYaPxeftb4EPEU+UskK7f3hnfg==","signatures":[{"sig":"MEUCIQCjxflRKNkisrzf6SvTfyYJz/VM/eWl/zF00WzRT+0sXgIgEkyGd33xIz4BrlvEAhMJQCTvKYyJ+CdzW3ELm9MK9fc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX8CRA9TVsSAnZWagAAd5YP/1z/JBj9ojTiVx1ywNhn\nIoBYDv4Ca0313Rw5va5CjRQMlPvav3+Lzs5WqXPujttkpWOMLSXefQ2hfgqz\nNbv85+EgWr6bskWnHvfw/B8pfLGue4lPQLC4aDofdBYb8XBikrMuf/ezIqpz\nNXaeaDxIDIglxLxAvjlKRqyjlMr+L0yigCb44zZ/n+Z4QHiqHysQq9o3qC9W\ndS08dz3R4npfpoaTlPvdF7JgTMdbT1M6daInGWlX9lVSdm0Z7S4FoZUakmNf\ngmMRa/ZubhWSp6/dOLoX7RzwFSnlFVauseYJUj1cWm3oT2huM2GDLO76hjJN\n8ga3XG1ykMYILCwThU+RF8gZ1k38zVGi2uxtL8tNdU+yh0zAxqlQhro8yOzs\nAzw4HJpcgevys8AwDfLzfKhqBprs5Y/JxSBXDsAvpBhUPnx1uhkMwCw5JML6\nkf6Zo/iaQ6WyQZUwyoZDZhJF1PCWDA6mSL6NjcGyTGLpGLhY9muDDcErxuS+\nWj1r+0JvuyEknY/uQyDhBpHl9dPQyt72MGVXKkfe8Vy9IH1zhUTMsGzHKVIH\nqIKmAgklquWfNqP8iVNCiwgS5EQB4lnYV+tNA2IEsJAGWymylYhNnrJQvBp2\nyION5DeKrjfANd816ga3xuSxeCVQOX6dGpkPYJGz4AEQ2Pwz1EEJQIMqCf7E\nHp6e\r\n=rwep\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.e851d4f40.0_1568347643845_0.37647849001548406","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/slider","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10e8564295773794833ba4a78fa1f32a90fa0a56","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.905884690.0.tgz","fileCount":31,"integrity":"sha512-Y3FgBQBXYiFib7F11AlQbUE3D0tuQ4cglNt2soXGWGjx2LaAr8PVyJ8RN72PHXCvvqKncJl9UQeM1Cx4VOAbBA==","signatures":[{"sig":"MEUCIGzI0Ym9yOjzC2F+/zV84Gbj9TC4YR0+RkBdKQ6f4/ZDAiEA24or9wT10REO7ulTi8+A2FXTv6DC93MDqGDZVt9ctls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB87CRA9TVsSAnZWagAA0OYP/2F0xJscrQ7ZfG2uLdeo\nBnsare/n07frfH6TlJLfNvDO3GtP+ZOOEXjCXxYx87So04cgu3Rl177q0mVY\nP+/qofGTl0V9tdv4zEvYPsYdJBEr/ObHE876EFY4McwaQRDNElK6NX25x+/g\nBLBbbB+VYPFWpQlMgp8X+Nf6mTOrsB7sTnyqRfPAOVyjysM9IWFUkhqgZHI9\nDan7ZjeTCEFdeDH4npmq8SXBcNxhUa+5rcq1jzmQD9M0jCb4CR1Djvl6U7SG\npumkJKz/oSw1U62ydQKsriwNbgRIXfCXqE3pcyDudOEm3wVbzOelJbY0F7+S\nN+Xrd9wQW1fjYpYoa1rr+5pEwht1YuzN7wyz+RK00CfrSxDLPhi7y82dRnxy\nQgFu3EgExp/iopiHBjwKYesbyyLiEX8523ZeEqewjFi5ZVFg8ebN9kSlHJCq\nLlVo5bTcps2GQEH7Xz26CdkKeSiiVsuagRpOjaLP6JwW1leRNvpLrH7VLB0c\npgdpcR8iNKLh65okXfSQfPy1J8dg6WgFrpIl/Lc/aUinSfQQJiwtMxZ5Na4/\nT8zyz8GhbshtYHTHteDgE8wvgMZ0z1D0EBacbl51tJ81lifK1wpgYEtKpyIx\ngEcKPKwwD4OS+rI4xkYELLI4lLERDePGNJQjfXFnKpVXjBPcgXwKMicX6DHw\nFi8f\r\n=CNdh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.905884690.0_1568677691242_0.9192104879586498","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/slider","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cccee3c72489f9bdb12b1f6af4d48b466b1c1f73","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.199534d61.0.tgz","fileCount":31,"integrity":"sha512-488ATC+amlCnRI3DiWpQxhs+2VWD3sUPtDI8OdtVZmP+uaakzERMAETjfDZwdV/Fb5gYALfiDUW/iOoBXXWq7w==","signatures":[{"sig":"MEUCIQCN64nYW9hCUNDKsk/BLrO0L1UE70WGoJ7D+m3jHXAVbAIgB2Hu3VxpQEnOPP4uey13vhVnIp28VzF0GkTZDsDqa64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlutCRA9TVsSAnZWagAAyaIP/17Dd++nOH9WxT1sbhFQ\nqIIVhcBdBqvocJ2iib7bXURMq1mG4xPQOCJ0mTykYUJ4oFARnRVWOZYitp7+\njxGfIRCjWGf5nP9VeXu7vsnz8SalAImhFyLkZxjNva6p+sgZr7ks3q9WXo1S\nszHxjUxqYRdq4qkPo3k3vmmruDwBF/m4RtAmgZE48T5mV3bqemNg6Fn7XCS/\nfQqngdTPjjRg/1jPREJivUYTZejZR4K2X14plBoNBnE0P2DBXoYohkEkMxvb\nYKL2ibfRKB2pV5STuqbsfQTS//DURF/VApm46khnbwAXTWYmjEIMKoYMI8ce\nHhGHJzo2c4sb+lKXju2ggdanP+7WYWgrPlHxlpfUadsQqZGuBD/cHckoSK8l\nlb616BHRap82C1fvVp/LJsuD9kOE/EmNuAqv5QfcrCIRy+hlQgjOcLE+OMUV\nBmWD1YWv90yDeT2RFhMuF3w92eHRctsKRnhC1y4ABXPn5KELo6dUXJGSa8Me\nR7O0XqpqSwJifAbjQ0yJ3BygmRHSXQOIticelQhyIagyq5UF4GQC511dmmoP\nVHRbI1bIVhzMY+qtAICUpHHmNExypmgaapKCvPTnhCLffSObMv/luVfuheL8\nt4vV1bp4XVcoLtKwhB8Aj1pIDoDzQaKP89migu26c3ZhlSTBrhHJfP236HFt\nN/Z2\r\n=gWr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.199534d61.0_1569610668641_0.8337110453120409","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/slider","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c01c9465c478ad82b61c303305dcc507277a7616","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":31,"integrity":"sha512-P8K0IDL+YPECTB7ds0FWMt9e6K0xx26fJqLv4ar8atYFeL/U5xgSkaXaMFOS/TYS+fdB/6I/cNuV4+kWLz0Snw==","signatures":[{"sig":"MEYCIQDR7yHv5fd7PZOeZJgMFxeXgjhOHr4CcmyhkfhWfzJI6gIhAKdA0ZZmbr4AbIzrLXPnHanOF0cq2/qpd6AiQ4SjKtHQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaMCRA9TVsSAnZWagAA05MP/0/On+VQ+gGNb6i5XeLM\nfYiqTfhLa6u2r0JksQ5eTh69F38NGDcOnN9MgZBhCbIspxWTLyIwylVt6fHm\n2CasZf/JJ52oa4davU59DmzY9wiwZmW5KIqSufTs/l1z8wjQ7ptLRMdVe6x3\nMuC9XHQPvK6k7lFzklOHhhx4hr6uQHePfQC3muEgtIj31S6MZYxmomUL8b5J\nLBslE+55lK7EOBGxoUbQfHkRspvFPOEkcQ0oFyOqXun1B1LboxhQStgronyc\nzaR3fIlsnF4ou4VcKICnjBf4zAYexGt6RF0UmA2yBcPMYGm8jM2QG0vMfYT7\npszHvGQmTg7qp/bd5xI6KzWToY9zhUEQB0DZ40CTjajpqOa6igwf/o2QD+gC\nvf88zvrtCUPO7UHuNUYtXRl1+Hha9mi0bvYpfbpUlFcuFLpM1QODLoomYHb6\nerbqiqm9iQc3UijlvwsfmmRv2EJScawM77KuKTXwJmdJI0CGES6RXL+uoRYq\nQHkt6s/U/dqkBIfdwVoKjKdnmFleRuMdje13lF5l1nBx6zH3alT3qs5elvst\nTEeu9d0J3cWt+oqPch43zXhEf/6/+RLjncRvSVPHFgZLuGMVfhGQxQPm9R62\n7XEIDeKTyRQAeQiMUvYXYtkwvTOPB93Q/HRvv1j15p+wLYlHnZCmIW74yj1c\n/6za\r\n=QiT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.22d7ad2fb.0","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.22d7ad2fb.0_1571165835979_0.820043715359156","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/slider","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46549e33d02138a792ea51b4c5e47366bef2a403","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.735147131.0.tgz","fileCount":31,"integrity":"sha512-q5Ax5gouCDRHn/AjXtlyjeodmqcrTX2vALCiLZy4UfBn+FpWvMP5GbFhrMbwXQtFM0hdYrlnDLWwVD7Ow7gmZg==","signatures":[{"sig":"MEQCICC0UWP/yG7iXAkhvNHpRxhwOk15xhDkst1OcP0PgUdNAiB65Ojh7vNc2l0NReaSjUaXFi1cr7uEKS3RO0GFn/jJvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEYCRA9TVsSAnZWagAArXoP/2LnZiLFVcDP7/5RM+JU\nksLHhl6gFIBYdWJib3925VfPWb/qWGeXmNBoFrS9SeqVBx3zWvpDZh4QQLCp\nC21pcMYbpWof0SMp9dpskTaTti07g5lI/IRI3OVrYw9r6Dttw2TPtcrH1BPA\nz52++p0/lBilj7iuxLS8RysdAGGFjVz5v7i/7fgr++VUiIiqelgmJxPkdIKr\nGiRx4DFYqPJlzhsHovKKfn0Vy0x23KCdiuClU3eDXFs3XP66MeoPgIxROZtd\n9z5u90pAR/xqDEtW0wZwFcCJF/3Ijo82cPXYuudlDfkcLAx1JN6eVW+hnm0U\nqjOEmAjt0mUpR2bi2eNcJ8BGlhgzR2ySKcDjYJgtTD/J8alNtactmOKkg3ou\n0Gnr1Ftt8XJppTwnZ+9+ps6T4Gx+Rjz8lv8tyI5ejtZt5ALvU6BwrGtKjZay\ntIdb1DJsZbyfM9leAU2TM2hhuAHENswQ0sz+rAQbfv+3SyZsu5ckbMx+eGU+\nCJXw3TDnFQX8a5H1C4HcpAbDnyTZJvR25nAWpmEAaRFThripdzF8DuaPLosP\nK3UxO15J1xnqKZdV/1QEANnPxNGgsRQVR9UBJ8SuuGvr7LbfemwABtYjTQZv\nGkx6a3do2SiwLaFrrnhlwrS8HkMFqOS8LFrl7SSe6ytTwhPGMPxcaJhS+d2V\nwlRc\r\n=ATKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.735147131.0","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.735147131.0_1571189015791_0.9037761469212495","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/slider","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd891cac800704d4b211d6a9ae2ce0fcfba3891","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.062ade5c0.0.tgz","fileCount":31,"integrity":"sha512-fBz2IfkP14pQqp4gm7QPoL98RbXiNF9VtCPKjjhRCTnIGMt54imbs8UnmYBG6v4q8VIH1W89FtulNxD/BdPLiQ==","signatures":[{"sig":"MEYCIQCmPM0C/rsBvI4eWYrQpIsbtrDIObcFqgsZfTgLkbDnGAIhALveKLzOV3Cz3NM1XOuIT+jCSIBGlIbFAkPKGRbhWFcD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":364663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71wCRA9TVsSAnZWagAAkHIP/innT1Jn3kGxo/vkUu1n\n08mk25hTBF9WPrBnqI6BNTHmluqsDe1B0UDbaSKNNfKr0Z12Kf2AWHoBwzw5\nYbo+UmAjLvOA4N/FrLEABL9oxeSXWIpblwf4H23G0pXkHxxYnv4vP+imyis4\nvRoCKWMu770+A+mjx9aLatKHLITHXTObZdK9Jav54RuZYXmZj6gC6y4Vq2yO\nOKxHFbNhlxwV4ZCuWm2RMr90w0X9bYPNHLhkMyVliGDySwVhJOPhFNKL99Kk\nkmIhKjzFDBItjhpZ5O2wrmKXOXHhCQPxlvrVg8YoxdtgIxBSNUpXXsoTd7zm\nOaK7jhizyK48xBbxA+mUc5mwzvL1H1iKV752IfeiqSbMFjibZpXkheLKBTDS\ngDAB67fhq9suZbEoghmDajOKCRQj1qNuFNZ3zHzECmNv+pnrxGEnvKTMKBnu\ncZxcUUU+H5yZL7Gbhfz19zOVyifGXi8qoSVes2eNGR49GdxQ2yKc4sOCniFV\nHQ/TbJb1csSlyL+ur222HZ2mzhJdT3Bd1oJmQhhO6v5hJ15tbZ10Xpwtzi0Y\nOzHrJxsD08g36nuje2f9J3s9gCmDpP3xpLR5kMKLHPg88hecxdNz/ArY+oUR\nE/KKeedqTIIG0ep84HxVVDYoIn/XZNocjE3HlbiVMxfnTOUngtwtcweulZvK\nEbBC\r\n=e2SG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.062ade5c0.0","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.062ade5c0.0_1571274096017_0.21674659543087338","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/slider","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb0713544988c3407730e131d26a6b152d63de5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.774ad4f8.0.tgz","fileCount":31,"integrity":"sha512-aJ1f/gx9zSndt1YMOL3sV/VfGXZ3q0vkOg11vSuEhIz9P8VtNlTSfLyCr4tDOIalTcer2okIZCbCXKUUO6TJ1A==","signatures":[{"sig":"MEYCIQCaa0JiXx4UH6xPemsLkSMwBB7gLiMnhexWavk3K9zPYQIhANLG6MAflwzm6GCUS9nC5Rux0tPbvpUBevyA8bswX825","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hWCRA9TVsSAnZWagAATVUP/Rh61Ok5B9JJyWe9qS3y\nfZbD1PFhkglu960pvJ7rdeXD1ck0+KK4siqE2Vg3Iarb1fvxQbNaIHqWl4bN\ntv79D1pZElmPA30GF9kXAziaDeJCejv8YojLiIGDsl9hGJITJ1J/uox8BbFq\nG3in5lpLUjUZJ/SHc+iY9AbGJmqn6wqzxkIOe+asFJZASa3rtZ+/Rgqf8Ulu\nM3PWCZmJvpZ1AlylbkCAldXKnGzKmuCKekMD/XtK9Wus4N/ArDnkcpnYyLYr\niHnTJCm/jaZ67BcMqkLSYpozfgvQgMKQfenIPS+JcuaGlIw46F07OnKF4n2m\nVo0W3T8iQE8GtE31DVop+zEs0ySxHmivDPa11jMXUN45zaBgvxDiA2FpmW8g\nkmJbKJUlx6uPK1OSc/zWISv+/pBn7/vrOiwLhWKD2Za+K7/yP3GoecKDYXC/\ndWyCwoic2Z+LjnN5ugPWx7eq5EIWEd8OiFLQez4vIV/PUbK5Gp9hYHlszSCz\nONpWZ5gUcuftZzkICWbtKuuaPVo1Tu+VJRZq/yxvAU/ZECY54cP4E3Zvf8Bs\nfdO+FW0YwN45KIH9rXw+ZgH6njgeWOmX3UfuTtRZSo7zIl5YSOVkUz4/jdU9\nGolWHnJMGODl+epWpOaea02lorG72wXhmW+ykdTstheqT9MdhledeF01SjWh\ndqvr\r\n=Xbp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.774ad4f8.0","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.774ad4f8.0_1571285077699_0.8216721418078696","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/slider","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ba4ad5d0a3a31a0a978824fe5a589732c4e0f69","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.5916d18c.0.tgz","fileCount":31,"integrity":"sha512-DXBCHRa/Zq555w54EQFll1eP0nl4K56qVrfNi7xEYOR8htx7Ogst0WnjrfOkrVfejT2w4wQpBzy8Dra7QOJNfA==","signatures":[{"sig":"MEYCIQDyNoFSNwCJjVp3kbhkVUcJVQZFwWdAaU67Yyxw9daUVQIhAJY1vkPqd+ZlWRmGIpxhmYboGCmix9cnAlq2iNLsFe7t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvKCRA9TVsSAnZWagAAWz0P/jZu3xkae/m5nRe7CvkG\nG6okayZg/mmSUnVtK25f1UAZccOxuMnuNqFev9Kh9RvTPvhkVzScV0q8t0aL\ndJVFXSGBxqLrxiQLmlIq9J7eCSaWYKiMOOA23ekzQbZyvrjOnPFA0kDHpQJr\nRiYwBwVG/fmKMkmJulbZ/ms86xMv5c2UeVoWWu5YR9Ohb4nr1/RDZKidDq09\na6zqz7Q+OMNgaDujkI03xGqlxgov24wW+9+/tzr5mRUWTmnvq3Xv0EehnHDC\nK1Zaqx7w+RYoztsPhCzugPratqcH1gGaYVhcQMBWIlKY4sOadFedChZLOQa9\nRJq1dEdMJudZrX1ZKMbhxx2XDxpWcxflyoNX+4+WwqtLQdP2xoB4gKvY7rqw\nP95rLgYeI7fTdHHCj9OQdjW3zCJlf8g3Sx96EHUvbBrMAv623cyT1eyU6Cfe\n23Odix+T/aJKkJTBd4w1YN5caXxVC5r4TPYyJhPjMbipEGRD11qZBI0P4XvT\n9ez9ymhtKZD17V1lLXssRhoOKH2uT8pFbaI70w5OAisr9/BxEVcp3J5FL+Md\nFE5SAJUnWs0Pgw/19dk4z6ww5om6PtyrpkLZDxWdZymT1RoZb1Cg+aog+brN\nLbWAPw6pumcGNxtyGamRMq504iMoGMAQNuL4y+lou1Y1nDN3kwSAihtvGwXx\nx4Pw\r\n=5/gx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.5916d18c.0","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.5916d18c.0_1571429321748_0.7159562843005121","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/slider","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"897c51ef504d90e1e9c04ba05cb637bb1cb5bbf9","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.d4141c95.0.tgz","fileCount":31,"integrity":"sha512-2Z1IRzkSSvJB/CYADqyhmsRElXB4rH2SC8a6rJmSjg2tueG7ZVWKCDmwzUxVUdHJUUdn8yNl6NcdqnX9RhIf9Q==","signatures":[{"sig":"MEUCIQDRif7OqU68MnrDEWxewtkyihk87qVkEq9uWGCWoolS2QIgf1dCvb7KJcEQCFgfle2bFBdiM3slEOY1uwPQMgE7Ql4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCMCRA9TVsSAnZWagAA16AP/1O9EBHqfMEZvX7HEYfm\ntPwesbym8ZCBjInSYYD2bGw24+cofW+h7xfeq9rE2n2sTHMAbejjiyr8LifG\nfhxChItGwI5d3f2vm+XM4VLlvMCHobSTORBeIQcgYJZD2Y38L7H6QBi9SsvM\n+TYQCpCNqcjD8IITJiuq96nUJEblUYnK6jMRrAZs/djG8Uojf6efSqcRjzwm\nDOQs9e9ls36ZS72TfcZtJhYv6LWNOKEqRpmBpvkOAXJDYAlqPZVL4IYG+/Dh\ngYZ4KUKdLtYpiGr2LdT4X69kt6zh31LgG8F6uFun0JNHtD1E9JnU5g/5EPWQ\n8naKZFZ3xC1TnziqA0Ej4pgk06ybx95RdsmTTCAx59DVl2wMQgornNGNnbpM\nm/xdnAshpVGiiM3vPE5aVJVGpsCKWDG2ZBtM2eHTuA0i0nUDKZYZ5BwFYsnR\n/4me4UoURxx1mncR/oGsdre6xE4zfU/JzI9ty4yZY7JMdTjnpkolADddqRC1\nJleZHuvfxMUaUoHf4mgIlwOO5CDchNkmDakRUr43z0SbMS+s75Zj0Giwt7y2\nTan75c7Em4G2hlpqDFXUrv9RPVqX3oQbyjqVx9lsAvkrK4bLxoKV05pbESq2\ngKYMteBAjrvWwwLP0dwgdrnTtzApYIjztm3DQQgFC4yv2M9Isgpi0JPiCamv\n7i7b\r\n=IDoF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.d4141c95.0","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.d4141c95.0_1571881099853_0.03652738923247423","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/slider","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0147f559b0daa5e2006e7281a211627cc84ee2b0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.2b878b3e.0.tgz","fileCount":31,"integrity":"sha512-dnxdMYzliheTeGZbzOm1+dVTJIsMJhYhdRtxN6I2Rf28RBVCa5VWf6LYsCmxfwyxmJWtwVkVVoCImeDrbkqn3g==","signatures":[{"sig":"MEUCIGKFz7i8NGxG2hRU7lSEBq2EP6+9DfCB6v6XP1I0xZxCAiEAtd0WTmCH2W/1qyuQE2tB+2Mhc3i8yMHjwKBTQhFslf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmlCRA9TVsSAnZWagAARxwP/3C5Fb3hba9j1z2RGoOr\nPq6hxfWt/hopGXUA83A9lAfsW8e7sL1NeMJ0FOMz60U+55zLokWiEUVO60W5\nHDfItnFlR6bNjAPFJMfPbbhn+KXN2HSks9yGAaA8nhMIa9Tj3ouxbVYF2VM0\nDYcuIzDMFjjOwnlnp4vB7G13u7imZuC8O+a4SWk9qD5ppemTZ06ukcUKkZrk\ntz4JcE0TBhR10+mgitj9cIVSPYIj1AMonezglD5xDHinqo4zir8C1/usHkeb\noXlIuVC8op45swkwZqsCMnMsZl1IwLB+Rt+0yZyCNvWbzV//4BH4m0RFNQg7\nbJskaxuN3+m7LMWOffvBC36FyL9aqqPwcHDcgthjLXQwlTsAU+HeE29uxmHz\n0Wk85wiCdd6eBGcU/nOlwXZHj7qmZeITyOVYz6snCpt3BNpKfpaDqa7JsAnC\nN+24EnZRHj0DzirmiqvpSKzOs+zmtg6UY5WtqLtMNVn1+n23WR4cnOL6frt/\njj7zaVeWM/bGsVagorfghDrwsDvLeYlNnoIbW0Kcm+cYBcYfyWZW+cjWIuyk\n/pQWN8tjg3LkmFRekwCGlphHW6YuYWrKzjxzOC4scGgiLkhKfGoOE6B8Ea3q\nDDl6aRlp/0eFsSGZ/xyC/GZopd6/tTU7+Od3LEwIG9W2FjNaCbWmk81u+c1Z\n0Hhn\r\n=W7Fj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.2b878b3e.0","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.2b878b3e.0_1571969445055_0.5719155012255781","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/slider","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2474d4734b69a69b8f3cc100c920b0704eb24bf6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.b06c0efe.0.tgz","fileCount":31,"integrity":"sha512-bq5Nf/7Gt+FcE2+np++Z+LHz7qcEkQtTQc3ItnYDM57mpxhbMSk75Tqi5yq2XeSpd7jwzCKJEFOsUyHp3806LA==","signatures":[{"sig":"MEQCIAiCKqU++ornlK1Ht51P1Slf3htvSCiylGEJ++l5CapuAiAXO4jFRpuH/7ZqwqHP0BWWzQEWhL66Xb2XQgtPw1S68Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LSCRA9TVsSAnZWagAAsfsQAIlDhbFh3nw/RwEDBJHc\nkRMsRjDUKMH7lYoJg94NDxQufl2txGUXt08lnAdGxAETbkkBHEyAGfMmrO4D\nKERI4InObEB84rtn4V13d+54ISzAq//NnDqS2g4B/l2n5rKK3+9VW+rQixZz\nlFO49zknlP8jfGmwbN8muorhQC3OoFAnOodLkBVmDI47Bok24iHc8iYM0asn\noEjCKtg4FXBjh5gsK61Uc6rv3I1XIi03htEv0in2P05fs0+hFD6rgKnn1P1D\nNOTneIu+7qxtAvCL+4j96ZeMTCS2RTatTPUbjbdfnh5R/czWZ7MDLOni8WVL\nO+qLRUrkxnPxaUZasKrv06D/EZA7gJTLqbwmfguoV8ls1l7iFTR5ymZ+DSWq\nG8mQz8+nfTX0r8Tzxe4ifv3CLoJyVaWcvdyvxvdRaZagEgqMJu2RNyBzV/Pz\nVkJjxVEJ8EeuCesKl0UoqSSYw6dd0KfPOR08atrhcCictrQLHWMqcqunmaFQ\nBB7/dmF2xci1TvVn3zPuR55YOwbkXdZiwHkxdX9EkdkkqEAfkHlIxdKhGn1L\nS5Yx4jCXw5HlF2ezHCUYzIFA3+kFILiq6emO9VUOoa/6PIXnySCXf+QGEtK7\nYq1lVoEaJVKW7tivYDESpJWwWNz73EgfBk6Iix6b4qukpJ1z3tMPTu9MuB2d\nZ0q9\r\n=FB3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b06c0efe.0","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.b06c0efe.0_1572053713609_0.29402190354471136","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/slider","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ecff2836e38e549959706470cdbdca4c2b67053","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.01628efa.0.tgz","fileCount":31,"integrity":"sha512-GoiSxSdnvk4BtggT4ClGLfgZihPpZFTSeI6h6XfRKuI7QCMrdEAtRT6/ITTBYVmwGdTSccDHGpck7SQRAtZiZw==","signatures":[{"sig":"MEUCIGHSmGsO+JJ+Z7HAHJRonPTh6JGJqzwhfC9ad2e+Dq88AiEA5x+NQ7PSeXr2EA+ahqJB2ghn33QnfNakn8RBAM+wdQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4G7CRA9TVsSAnZWagAAjoAP/3Z5A0XQlXFO51ATLgzS\n56exRj4r7qEL/f3V5hefdXURhYlZTgVk7q7nqNwXx8WdKUIC2VyDTGfFBtnF\nzuSHd7pS1dFN8fMCoD3cNVJT/JLLpzRinJ2axX9RKey4ClOc5zwozmaLsn3n\nHesKrewjxOoHJmexQERyMOyXj+omV7xZL1n16jZnxaOsk72KKFuIw5UXKwST\nB4GmjKgEgBHed8x1lxi/ephACrFsLuiL2m4XHIxUvK4l1oCMVozUzJz7fJSg\nGDhd64U3ufPoA3dcvxlGsZRtJGg4eoqLKP5uf5T9WJEZuafWfnLw6/47pCiW\nUSmA/aCbzYNxWTpMWz7rRC57plYDjTGv51N3Js7w6y1hwTtdK9tOTwFMeoH2\nVHodkpJO9neSF0shlJiKenbNuNb2eQZnknw6FbPmKyj0RTCUVgtCVHp/XGoj\nUFoaazI3GPtKYxVjnDt70sgUpS9lfsKN7UFOIbX9tkC0TP3raj98rAOG/elm\nWU6NmxBfqSOBxRiEpCyvNnbPDWLwuHPYfmb2nPKRnfJpfRg6jGJYKAA4bQE6\nUthjW4lEH6YV1w2XkueRWspcsetadpAE1olqwQJveHgg7SOWLzsjxiZerOPa\nubwzzo9u+d4NdGjpadeVsEVZ9czMR2b3udG7rwBciiIsl7Z1hnupJ7wo94fm\n+8XI\r\n=d7sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.01628efa.0","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.01628efa.0_1572307387612_0.955017752939342","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/slider","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ab9c80390cff7981569d6664c79c2e73b92b619","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.b5c6d66b.0.tgz","fileCount":31,"integrity":"sha512-Y2gmWeL/A7a/cQbSE9QHSIPfhRtfCJ0VMcnrmVwH9l39gSnwH3j2DpXotCzw8yyJzifDWGyBLju9FOqVzwwJMg==","signatures":[{"sig":"MEUCIHmakaj+cTOpry+Z/nM60hB/mkP4dHk/N/dQ3ExSMawUAiEA56Sdtp+vVqEDLB3UQynJXYoRO/5k1zyu1tWheGDNCvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1iCRA9TVsSAnZWagAA0QMQAKEgsLd5CabyfgcdOSfn\nKrgwtIqp9RojayW6ng4GjAruo98RPc0xVklUlPHMFhkb4Os17swlq1TR/Ay5\nIrvdN+DlG8eQGpGeVO6EGZ2NladVOsiJXC5td4Y3eaxMFz//ixEzYr022i9Q\nT5LegD26MxJoGxfpJEpMeTnyq+ntHiq/2zC9lHGnfleic0hbQWjjyqInNg46\nTmBgCF5h2MAmqHFvRMBwqdV1mTvee/gRxUirXT1FBQS+Ne8l3ItNSDugd4an\nO9ANJAPyOcYNs/Dt4Jy1kj8+7X/HKkk5bKhY+AEa31gv43L8nw9puBjA+qxi\n5Qb/4uga24xkftlvRTXjwKAPlg9l6X5dVMk0HHmBOrHPKBu0DGmver8eubl5\nS/wRoc+EdEI7KbnXMVi/+kO9+JbX/xDBV8SPotFUayZKmfpCjnP1Km5Q80Jw\nBg32cBAjbnYZM4HWIpChgDJB/E9SwRTAov5BJ0MKOn/l584f2UBMTRaPAlOe\nR5QVuqlEZHYjv3kWVaX9nHhhcqRVOk3Q9o4qHyIuunIrfcJJdk1P7wulES3X\n8dfAfkgQB+B3+ZuJi3w2oHbuO8MpKilTZPuErA7Gz1xV4+6s1DtACfyYJJOo\nLG7lL76oTk0LOhlberT3nOOMM0PssQ4w5yrvB65auiAXZp5+fwZwnwvyC2K7\nRMmJ\r\n=gU7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b5c6d66b.0","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.b5c6d66b.0_1572371808070_0.9095402256322136","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/slider","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2dd166766d9b069ac70470f1a2e85a7fb740f71","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.cdf858ea.0.tgz","fileCount":31,"integrity":"sha512-raYWnzM0o+hBir++vINiApJbsKaRxL/yxLxDlWPXE3uJu+Byh3OXIvaaXpQ6k2dY6KB42FBL0973HDYPx8sgfg==","signatures":[{"sig":"MEUCIQD4d7i1KOSjO4JwJh6N7B09F8dHepmZ5VkU67p5xPafygIgQHBsYBfP5+8JBEorSC8UIjl+S3SW4McyL2FAm5SnWbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJjCRA9TVsSAnZWagAALzwP/3MdhZCD3iQPyYypHR5I\nhpwifNY5O3xQ4mx6ltBWGqDSP1W3heUIBQfBumnaz+DI8tELbHTInTFKbfZC\naiBQ1F0S/4EBS0ovuhRYqP++kX+QrsrD5vv/pncXE5ZY6aNPwvvE+hfa6T8N\ngtWmmLb25NE4oKU2i0tuEhdFJlheo54AD5JRO5qV+AraBbUAfEirWfOauRSN\nXI0cI3uRUv+BqXsEyTIIVfkbO66j5Eu3PJDUF+TaUzagOuxAeiQZOZsVTkDd\n+480N5MIMOO83iOL+tybZihrzIPlBMXdOCIwDNita9g5zBSZSwfqSmwI1zh6\nrY46VDeuOuB3Zvkgfb9WdjYeUa7Pc3PY04TcJ6/LMeN3jU7wusw+608/johd\ncQpeWLdSSzfELB3M9MxC4lpQEJT7S8L3DCk16dPc5Ub/WH7cpjnXzP7TWF9n\nue7nEKMmMcWxm1IRl4K9PfPOMcXpKzX0SRZDxefRQ3zuG0p0QL9bYr8LPNzx\nbLFomLk3Nc1O1xs+JG5jNpmDLGFYpRjBmm3Q4cdHwKTDkhHMaTLhjMnda/77\nGa8aZjq3TDarVuaiigU++IeQDMk418hsysScqanZ5I57z7/BeK0hHX/wByvC\nEsLn6egH8uTm7YnEMyiqFUzTiqZFU96QsuuyWDzPX8Sd+SWIDI4Q1ps3NtaP\n/6aw\r\n=iMqo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.cdf858ea.0","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.cdf858ea.0_1572631138891_0.22901909333342574","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/slider","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bbdb039313961d9af7abe7af84c6329e29615ac","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.719b57e1.0.tgz","fileCount":31,"integrity":"sha512-19WgliYf4SgkzkWjAEEHLJEvP9Gepji4BPDJfylqzBQ0iC1znoBiElwNzNuxq/NC2ryd6CFGFqTYxSzlMJo6BQ==","signatures":[{"sig":"MEUCIQDu3pmb4VsyVFI9voBeh9TrpBjWsf6Mz5m3aVbHvXB98QIgL+hmcG1OxokASJfD2jEym8TaGarnA+CD7/YjFWe1B48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8kCRA9TVsSAnZWagAA0HAP/3J1mK8ElwjFInpJzJge\nqEcF78cvxWbkkXsewHfLK9ZCYyYfTKNwqKwS2GuebXKSVbfzs/KRYuUXxbXq\nBuAoON9+SOZ8XyhOQVDtXUlzEyCppqo/JjFgCApASQQNNi64OBl03yVIMIM4\nsb14Q4CQtKHvuNuvTPJDlLhEqHwJIo5CJUjXiizmKwHvWwF0uIR62oWXw2L0\nmamgMeXoN/nKpy93DU46ldKBoCysUeNG+897H9DSIcWeDk+72djW3sjj8xw7\nrefZQknlIyoxcQMVUad6Qy/dMIgXZXwbs/4UGJpW+VMUjKvs1iayOlGKBJWI\n7igcxX5AFWlIwdkyl3xuneES0Adu/ZmR0CxO5O8AJZNdpCgCLd6NSHsLe0ZZ\nUts8Wv+JN89J4oDN/KlMzMChfl5yHnUki2wiBnh85a8Yq48xFneXm7yMszu8\nEscPHM351BnJO5L5k6g8j603rgzknbkWzsJDvbvQElSauGW3Nbk8acc56QH0\nPmM1kS3cCI8EfAY6xWnk7lmcEyxbKpHjoLNpMV4cv5UMhPDk1LAaLT4Zmgcb\nv6/TF9oxM92zZpL7sgS1gnjg5D3bmRIv9+fjSQrZMYHJ1/rgo3K1R5x7mP6J\nezC6Xa7v1BKXlqWVIFtHnUMamkuls7HeUxc2VG+kkG2Bsd6EuOWZ8XzgQlCI\ntGz4\r\n=HBpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.719b57e1.0","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.719b57e1.0_1572638500444_0.5339698115319742","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/slider","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ad889717a8549d20d1b2f0ffdde0f2bd2cf275","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.97cbbdc2.0.tgz","fileCount":31,"integrity":"sha512-Ji4l1IcT2yBwf++UWFLNAHVx6RwQ8xCzoLDpXTVp9to0QmElPIC5uQQCPvKK5tiFR4gVL54/F3BNZqE0cuHNZg==","signatures":[{"sig":"MEUCIQDak5HP8cGTVuOSqYB/BmxnRmrTIEEK1NEe8PmO0XuVOQIgb0c0hPLTPJ1RFrr2Vqg0KJoguotasXgYE5X7NBUzWmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWeCRA9TVsSAnZWagAArUoP/AzU/OMqpZabU9HjdHRR\n37ZvkeTy0sm7oyDAYYS2lc2pNLE6XjEgccC0Li2jnGMjiM2mcXL6onFmLOew\n00vIk5Y6tIoznVEB1N3FqyqiDo7UTxTKM3DcpnzNs2/rwZPZ4XpkxfBaO7Bj\nJjHD5IXPiBqh0xfC4+RVpdFc3BOO+tdDBmH6FV1/Tnr23QTgbPkBiMSSAWhF\nQulMGymL50HFdRmTvWFAQ+Hal9CicwjydZRw/yndH2/jnw49MBs3INoGjubH\n+0vw4wYT5GtNDikgASaIN64xVjWV7HfXhDQPPkuRs1yuQRynmRQuXhWE/Lm8\n9AqzMRAFYrrQcvB/2iUhuYh7YfzGzqAhxTWNbj1P5DtPHvPxAeYBFqinD6W4\n3WJXoTCAemGDuql22baICAalYXAT+rxW+V3fJRKn/v5jea9gp7ulvi+PwUef\nb+nZcBVGLIn+ycyNrjbbCzYj84YW77uFsyUMf01Gt91stnJlKKpAq8z7AQNm\n9Iuigj3wsVxNB4e/yeaNQLig0C7/dHAdKWNRVyRzzSV/o0nl54J8saz9FNff\niONuGRnNWgYgHpoUaOtM+HS/z+GCRncXv7KBTx7TWYePYOw0HlFOuGDt6Vi4\nD1VxBVbYV0qb3WHR6xZd5Tbctn3dy21fIIvUFs0jUBLAVLW/VpAn6KGZeeKf\nITIV\r\n=VLT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.97cbbdc2.0","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.97cbbdc2.0_1572640158428_0.6503203934377384","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/slider","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bc90e4095a616cc16ca1bdbd6f60557152752c7","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.8e36b3b7.0.tgz","fileCount":31,"integrity":"sha512-f1z2YkjxzBthpzm4nNfqw99hUJXimVlrBLBvKRP2HFUVasdgO4Y1otW+e7++wf8XmgxYHhtYETsoUr7F4DvTLA==","signatures":[{"sig":"MEUCIQCQNZjjUgSnKGnpdfCQxJZir2wI3Duywzoj162Xmw0LXgIgAa8OP4gen19GHV6C14BQVMbA2uhYDVN8znr5MdWEcLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0kCRA9TVsSAnZWagAA0F4P/jEHo4iuuYCEaav2GHOC\nIlE0adzpFqH7dC6e7GQAwthQlAQs0V6oOQvzgdC/MosQ9y/ayCKXjF3u9R8p\nvCU2iigvQelRm4Pl+DqOuLSN9rMcQMkQis9o8ZEn83LOhAIQ6DBrK4+O8X9Y\nbLqvnWjj3LIKMddQsDX99dtxZdaVOPbblpHGfllSqQnqbYTRhbCXC0IoBthE\nCKX6FyAZ5SiTsIw/vA+f3D0RdRVQiuM+cPiV75tkudPNAGjND7lyS89WNEsV\neohBJ+FkYLMvyqQ8X+ibSL4jL5UM+e5f6Its/yEtcJhvfaG983+WxbBsF1UB\nZM2+ZFybnR1sRIPBzD2zmzsMulNX9LaVVLD3TnclnFhtXdf3+UOcTx5l8VD/\nuEEA7xhcHqFqxclzgOjiVdYnBVJ3y7gFaxb/PHsj8CChfpbA4JF76RD0pNkc\nivDZimoCRsqGaoBnkdxXi2mldNYUuYURHsMX/4tCbU7QPMsq5Oefc6LLqDZv\nTYFZh3LkNA67zbhaaUyopl8inpG2OCIiNJj1MiNeK4mjZBeNtT8/F8Wj35Bb\nsvkRsi/WPo2ynE28BjM8Oi6KivXWloOPVxkmWLaOBfANXT4cue7Av0qXkOS/\nT6O6uMwDAM8iqtlMGlBiRq6mqxGVhDp/cxG1Fx6JMrW4+0WHRbMBu8wBl1NR\nuGv3\r\n=8RaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.8e36b3b7.0","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.8e36b3b7.0_1572642084160_0.8254580613837736","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/slider","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dfee62d8e0127b16db92abd1be554a2c10ebd04","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0-canary.62d3a09b.0.tgz","fileCount":31,"integrity":"sha512-1d2771BC4NhQpp3Ilk+lDRHBZsgFWZ4NAFFIzk3a3e+0WTgqGGtknb0nL9/q6p3MKgqFdKOXJOxFarRoJortfg==","signatures":[{"sig":"MEUCIFDR4GjzpslNTtDi4Nw28k+4S4DQuxx9AA/KIE755+zcAiEAjZgqV3PlNpK8iSbTbGe/LwSb4UJxisrW44Ryb9pIO+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9eCRA9TVsSAnZWagAAwHsP/A76SJoMZC94Kjro67cT\nIDIKoCl1wcg3+5YCJjYx6zoVeoMbvgFvbT8sRkf9oPwhDeKhaEoUwh3CdQKZ\nOrFI0r6j42YJ4t7a9nwVezuUFCqi75up9MKHjy0xqV1F4/qefLChRAvoMmU2\nSp48GIacM5gYOoSB0+XtaQw9piTx3mIkon/T2FiBvHx26Q9rn9dZ/TcVBat7\nRw41gVqGJl1KFfYZaYT7o425mALoVOPMzKPs2GqFWfSXafRSf1auUbNGDtKz\nYpihKSBbor+/G8Hpj5qu2OaQ5Dtg6jCl/CdpVpPgV7mkCF5NwaXMrreFs0y2\nk1AfocyAxdwe4A0ehGdpk9Rq7pygDqpTJtoM8J4q6vlxHTvWg9lstkoM766g\nP6F4eog6RcD52CiYCb/470DAgHs/lcb+eBVmFVRfVnyhG70tUD0g7IHckMIU\nOd4NcSplke8NyLnFrLvDcZ/N7h7Jpa0XCthcCQ14063gy+1TQZGADuco1Nfh\nGG3d8Cdy6KTKowWxZMEcCxjFwh4J2GN4soPEgcZItaNQUK91q7BI54brCUod\nMDio8EBVezovLNsgzfJNcDnyoYy8nXwBPjbRsAcXyGupXvJctVL7/IPIlXf9\n8VFY4eCVRNmCEPmA16sGas9YKPhpshlOHCc8/RtMTdbkExKHcP9dhYGlpjTk\ne7K/\r\n=IppB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.62d3a09b.0","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0-canary.62d3a09b.0_1572642654100_0.06968470239153257","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/slider","version":"4.0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a1596f7a31838e18cb7bbe15dec2d1131f82bb1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-4.0.0.tgz","fileCount":31,"integrity":"sha512-00lrfgvVJWSgI1ovnixzsY6YDJPDSfxO3DRpY15d1mW5UThh6Knb9MQFTWShj5NaMEOTepOpH1m9P79+TyBlTA==","signatures":[{"sig":"MEUCIQDkeSjmBWlj2HwEQsYNWj52hk2JSRo0dLvS5X2D9ZsJagIgK2kcRrcl4FcfdR9UTzZZDYZXHvBX7rMoucJGmjmH48o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":365085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbiCRA9TVsSAnZWagAA9zAQAIDemGTirnAMmKjiiNeY\nuE2pukTZbxV6VYR01s6ELpGerSnZh6PiGoLkfvcmQm6q0fo4vWErCWvcnQ86\n36/pL0Inx8gqdozJteXQjqoLQEUNwvkGzDzJipxy9GgAGVTcY+taYGcvNsZh\n2Zh6/nqH/DjXqRGjY8VSo9aj8SOzU4iVT1/MW2BqVpBVk4acs4juzqeDFR9Q\nJ6gPXw51d4/5Jy50mIzoHyX5yu2CB2QfNZMAZeP0WbIKMyGWAFAtjgTpZXXv\nQTw2r5YJpv3hXS1Miy6jPvUkCXoIB4rmroWN9iUcLjm9rhlF+4PjlpDj/Gae\nyf7Urnx3HcQyYFyGFDLKGPLl51SPoubow82GqOL/iD0PMtt9e/8zEyDrN2z9\nViBZ5YrtpKHXLfuXzCMh8Jib+iS8tGrFkK9YO3qf2mEv6V6+S0PAeEGVve4T\neDys+hw1XqeeSVjfqjdBc+YcsRJ+JvOjc/YLdZPOthjlGDu26aaGEpZE/4/l\nDiiUp+y4SS8o7jnidvxjE4dU4jE5WNvzKvXV3qpatmuyn66FLC+afwysqxb+\nMrfo9+wF3aOfV3oYY7OFf3chbTWRl/6XJ+XsyGhvfUekbbWB79GCdC5jdkUD\nlNy6dX+GWEMVSoSmkonBhzM+HptCY/lK//PPnLsXP4V5irI73fKFeGlF9eem\nkXXh\r\n=D9Z7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/animation":"^4.0.0","@material/typography":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_4.0.0_1572718305962_0.9450242907951414","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/slider","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2340fbaf937d844cdcad0cf3e0ef9c9ce435068d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b5eb51e94.0.tgz","fileCount":31,"integrity":"sha512-kVnjn6RZi7NOr9UF2Vc7IvB0Hv8RrpjZU125CxKHu2SYfXc+asjV6RMavNhu67nxPy+5yPYPxR8k5YEiVLUfWw==","signatures":[{"sig":"MEUCIQC6TEnpfEHfjQAPYRN2FOg59HIZsKiTh/1UVXysARH9ZgIgFvilzhnkO21Z7r1ObmuEB4a3C+fjaKaLri/SLWRRKQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOLCRA9TVsSAnZWagAAIvoP/0Nvk1O9O7DJX6xgs/s3\nALx9YC9lpvQh9cE/A5Jd30gaY1yyqGX22NQUStIs9o5JRakVu89tmPr7SCk/\nSz6pQP/269GHkBW5w2NCCaTDM0Zi91qp3nfhXEu+TdIIqDaMD2VVPhkfKo8+\nm/MAscNrtRglSEgdo15wslmogV6IzPd/16Y0Croef9z7eSqUtbpvUbQToxdA\nqmPX3yg6n4BFlrLlKq58ZqZj/FxHYdOtoSTKuMb/Jo+/xfIN94+av6Qrm1/A\nPTATKfW4vBpYcQDWlz0I7ABITuJshi6ESLoOhoVIeSS3eQ6lJ8f9X7ru/f+L\nrA/YXMe3lMA1NGcdD4HoBkBGOL1Rztc85WfbRzv0njJTG5Ff8THhGbNG9hd7\nMu1T0OqShWwKj6q1vVnfONTKvojDQPCnhljQ/LLgNqIV2K9Ju1WAsjJNeJ6m\nHzdX/DmDm9eQgRP+4mEfkCL5+Tjb1GgzRvcy6F3q3vCfq+2B6R0fqExpang/\nnmUYg9g48CVPqPA2H7wbZnr9gufgfsy40graXtEAznZA4IZY+wuWaGgJnsDk\n+Tpy9OGXFnKXRafR4U0ix9esIxOUwfgtNGppDbSUw1NgGOwfWmOWvaixU7Ic\n1XrYc6wD4aJAWcH8294bIjEq7xbtFpUvI1RdOTpctn4qFm5Dmwaxkg773qpd\n+8Nu\r\n=Byot\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b5eb51e94.0","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b5eb51e94.0_1573151626848_0.6072983115362569","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/slider","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9967f2b6a6902da472dc01375c4ddb477feff2a4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.58500806e.0.tgz","fileCount":31,"integrity":"sha512-+SuMwn2wpYRrBTiQtMPdzP90YH6qzfxj2WNsp9vwlYHMqQG4TcKeZo+92YdD1Tb43qujdP/b2McmvNla6AWOOQ==","signatures":[{"sig":"MEUCIQDprLiTa1XPFHrxDScrdMRgidhHKXkL6NTnHASdCeosQwIgH3+co27T8tOfs7epIXmt1Ex68qwfAO7r6UcqhOe4UeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtXCRA9TVsSAnZWagAASE4P/ArK3shCQrqRFgyRJAok\nfIrh8vs8d2XU1sMgCg7QWD8rUvDYdxup3liIgotJWj0sckTqfVKAodfihb03\nWv+LtqsEoaCi3a8v5uGTFBBxz4VCnkXoAbfBiWtzrRjR/+YUfS0ThMeSB/Tl\n5zZgScVYen9jeHsRFJ6b/pR8g/uhwv0R6KnyiKKxVdzbTmtumFlWcLfBukT5\naqeeudkJ8ihGoGXLlmHMDE0D43QMFW/pH8eMuH9lnOhl8rAM3HAA77obbsda\nuvNd7FkcKEYQr5O0nywzQL4x0P7+x65S7llmkIM1beptE0due2KBSqmu75N+\niEo7nLune3YJY+ySnpCvVttUmo85FLRfT1dHIgsVWheg3oFFWmPN0hgjSBvX\nqrEfoJ32zwcy/XD86RCi+144GQVwPy792fmNk2hZGQfQxFHR+5Sn3J9bjnA8\npax4WXxjN2mp8T1HdFbSOs7R9VB76pLQdGqSzpGdxlpvFCOln8rVdNQ8d/Mj\nc2t1T+3WAFIlYwQaGPuUD/tp6ZfPdIN0oGlkWXb8zXb2BKF51sTELiVFrQmT\nv6LEDc1RQRmUzRR3QL9CEsH4vcKM2xhmYgptHdROuJ5xGOF21Kixw41b20YM\nSf6zgE5+ahAPJj3bS0anPLx/iQEfNHyQEmBR0DPQs5xRYrbQ5oabFjWCqE7c\n/gap\r\n=cz1u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.58500806e.0","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.58500806e.0_1573227351217_0.34329414255885826","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/slider","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4d1b249c65c01af6802ae6d096ec483e2f4344f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.66299b646.0.tgz","fileCount":31,"integrity":"sha512-YNjjPH90X7XLoP2y5hMBTgYybm3eTLlaEusgxAtP0dEqhbQHRWtDdPWHMFO2GTiNgCnVdamBQaV/VqMGYRhbeQ==","signatures":[{"sig":"MEUCIDP0fpJnXjFHPcseIoNYcgykQwuLx3fQ3mSkyv4/YFXOAiEAtm64DsiT06fzvd7xYqqT4pjs6um+eZX7j7fxnE4yeFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEsCRA9TVsSAnZWagAA8/gQAI8xnjWVcMaklM2NR54h\n2WxDdTxfjTclTn1aDW5K5Pnw3qmHoo7xPMSt7G8SG12x/rUiGIX20QemdYvA\neOPBcykWGu/4ZzRqNpVoR1wrCoZSQ+Sv2d/r4lBQjdsKtmzmwhR/Nq44AwQI\neXR7wjd6FGFkexS0gjyvIzYZLCrkesxiHWX+2G/i909fA52CM2NBjzL363Vw\nC/6ZGQ6anncSjR8/LZTg01xFc4D8fKPFZsCOzquT2X3dXzCMheg999mpEHR+\nJrCEET16PCtU3cqQTsm+O2XNhJ08g7qAcpSvT2uxHE2Nlnnejt5nQzNVO18z\nG5sxoi6+aLL/joJ4AsxJTdiDuj+UrBjfh8MmJz3qDJVYszouy11363hCAxPX\nrqUymQCdCswVMIihSm5wMEKjwRWe6RQfpXbWzYbyruC4/XunyvoqFNz23gVB\nNKGsa0M3l3v1taleDHStq6a6Qrs8HbJ/fyQVEv/G7wcPDScG+Qa/DLJJ5Ybu\na8nziOweTz/UZ17EG/HBB94EhsktDBkBMz6TApHjs72YeM1yRC42+FVfOmzd\nUzEiTt/cO62JvBX7oyRNjVJ0CtFwa45UAgZdy16jQt2EnQAEBjYT/RUxYvtx\noRX/TNW4Z3Y7jUqkRvcivm9DwwiT2SC03kHy7ilhzf+eb802Yo1eofl1CApY\n4rIS\r\n=2jvJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.66299b646.0","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.66299b646.0_1573245228427_0.9163945506991948","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/slider","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c54ee1fb274106e6e2055aec416a5cf73d2f52d1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.821871e04.0.tgz","fileCount":31,"integrity":"sha512-27esxzTXrc7aGiT9+kWX1BQG0CpUO3gMVJwH8HTHir8CsLu16H/dyYvWpYl62jgi9bWmylOERMtc/sS4URSIxA==","signatures":[{"sig":"MEYCIQDcHFOFnoRWuPF9D9cHIpxVSQmgflaRNPOXx5D8jA3y1wIhAJCTfJOYZ34TIE9vTAVYml/ubag3Bi/HzhcCl0s36wPZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3yCRA9TVsSAnZWagAAdpkP/39CntSUClLTTBflL7yb\n0HBkyHQwO9598bwEkWFhc3Xcq94qI7gNTc01999OmE30BPJ7Ek7oq7JmSmYu\nC/lVNR1IgQINBcqObFvwwBIZd6hpK7ZaY3xFcadbPInbBNNPS6g1eKqqd7p9\niN9b98BE+oxeac7mcB9eK+kVvGkOvmLP2wvbqJ65E171DlB4q1CEcL7XPyag\nt8l2ODKQ8QNBtwCgLynrQLH1lh9y0+qm6qGxlCYnh5KbHy6IeMecd7y8byjc\nu4LHl8e3S9fEsBqIPRR8z0xaDpq3DImOocr7Xmjg1JybPbD36dY1RDSCeQ5Q\n9mZkhQgQeU5zuN8TWfvj2qPiTYQOvW/p/YWwYDbe+bvWHdJkWkMnl077tY+6\nNDdXuT4jGYnKvs/M0VSAQzKcBywtVh55Q8insn2HOVy1mP1dCnFFy4JOyXi/\navnp0lSk/6kUj1oCaHcXD17It2Z1yywSqumDgJ+ibiZBTL5MelRq9q2HsO94\nyrRl0YoAlRz2glCnSyNDiAM13VNlo4/ex0mLjwYKiXitFrjU4U6oShaDOa3A\ndh3JH/tAEUY47SPYKx/iBK7ABol9V/vyAkwfwhY2tx37gn6Ho+u+wyiOOOUW\npDopQUbkcNNm2ouiGVitTFzuwh//G3/30wPN4UeyyBEw8Vy0M7anUGN/0uJE\nZKcF\r\n=SqM4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.821871e04.0","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.821871e04.0_1573248498082_0.37199593075237036","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/slider","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bbc4342762ec000dc4eda49e8ef1a4bf0783bd0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.491fddc31.0.tgz","fileCount":31,"integrity":"sha512-vzaIODGS7guUBBwBkrLP3T+5y/OZ0+U4tPy3HssUp0hztJurj7t2IT279fYt2pGUi6Dv456OZKNZ1W/vfCftnQ==","signatures":[{"sig":"MEYCIQC0AJBCh+YNA+P7mfwi2mp/MTMybBBor9FcKCOzBL/fJAIhAM7qEwntDEW3QvrJcNg0OgVSiF3vXcS/PE8J1xSt5sWv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecZCRA9TVsSAnZWagAAxBUP/3hnKdkyfoFq175yFFXM\nAx5O8SN2Z7CKnA46U4ry9g7UegoP7ztwuE+eUoEkljBtyInUwTuPIj9OAZIi\nup5HOSw2ed+wg/9O0+UBSSA0dIbhA8I7NB6Z/lvDj0a02KLk2+jlJPVP5evE\ny8obk9aI+/Edpb2AC7ugWk2P9NE+08uw4ar5DVsiICvtYhpDXxNCZkskskkf\nyTJJtk7OqZdgGZvwqafPGuu+ulJ3QAgLJ3Be2wB8aYaSHKftcMgVUkgLk8uD\nnseuGa4Dpj3WD2DYMKDB0f6aIjJJ6DmSPFDeyKFIpHkOeTi7vv4tE18JN2gB\nJ4h8YBml5DAzhoIM5TrWcOJ5h1NwqdWlPJHpFNOBmtm8+G63b5luRZDvyNOi\nuf7sa1F8BEGm1zIw+CEndyMpQzpkfDH4qpBa9h4rEjVtE4TJAk3xY0f+/IGt\nNPpu+VwE8aNQeXi5Te3D7o1mDfie4qW7wztW+wEOGHowe/u03WfxneoxFELZ\n0X5Qx07HfuDAifjwLWrICmmRs16qmCwMJvdgeEH/77WGwQjpnyNN0W30yUoY\n9oglOnw7zjVEcwXyLkRptt/aNyn+LBbBvRBA+P+sXxEjKJayD0P0hYNXLauZ\nYRkk6jLkFc2Hs1Qqo3LCMJ+1NRIAFtp0rgG4VyjVCdxiPi29o3U0NwtsTFeG\nw7jz\r\n=iuN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.491fddc31.0","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.491fddc31.0_1573250840656_0.41390183867025243","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/slider","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ad036730ce470172a4ff211b2bd6196f01c9e3e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b0cecf145.0.tgz","fileCount":31,"integrity":"sha512-Tf2iNBlw792gmLJX2R/9ouaLiHykuJWyR4h7j5ByrfmvRjgBGw+kO/x6/kzk3aRhE1awgKEn1Zdzq7D1HVc8gg==","signatures":[{"sig":"MEUCIQCFZeJWmRVJe5NczOr+ZokrsuANNR6sVjmqg3QHX+7TKgIgYwwf4p6TvHIQI5TEhHFYdhHE/WAcc6cHJr1/DUx0lm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiXCRA9TVsSAnZWagAAlvMP+gO0BBFUsDVAyESiPzzG\nlgbVfCmkHzsXhwLWXxKGJPdryZntiHrR8wIlSLNVWtUK8Bd19GS+Z0mqo2tL\nxa4bbD0pKW/i0KjJ28nWcJa+O0B30Ak++ckx0I+CDXqh/CYW6rBA8kWXYdw7\no7QNTHsh6Nk/ndeqoXzFNjPRTCq8VaqrpFk2xdLTXoabaqEcbHcuMiX7S9JR\n3HA14xcE5/9NBcw3DORw+vSMlWWIM6cyXyfqrdB4nPPJtZQkaLPxqpNt372d\nwI/bVJqH1z3hSbkttw6oe4BUX5x8+fBICZrFQ+DBVpOoKWZHEZWANL0991uL\nr4cCJxvdlvAydZ/GIsO/zwTt7ArRkcgjl6qOWBkMPA8otKtyl3fsLeVV2IYP\n/9MRDoaxsz1njBaz5Xh+cImZUpa3gQKBD40QNt2nLp0bJk4L71pne7wntzSp\nAkS3BasQiajTUpSQ/LwDXCwkw2LvXK7zghE3h7+Qm+/m4+D8qA/OmCgXGYow\no9xqvO7lORYhOU64EsaInA5AHqRFRvp9jxw5smh8UMmbQ5bC/hEwtBS7DVv4\nkmqhEDdjhYUGt6DZXYGReAZToEwS0cPneZn7WVKDgdSFb1w5IilFenrrEkzs\nSschGvg9Fg3LKovHBxfuPx0F+xyN1lEq9VRHiCSkJbIS5jRD2OSFpg+63PDS\n6ENV\r\n=sI+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b0cecf145.0","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b0cecf145.0_1573324951131_0.4271335393013449","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/slider","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc2e7e4d73c90c120c9e4be2376e6cd85983ca6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":31,"integrity":"sha512-NFmzl1HKj9UFJ+uxfq9lGJjgRLES6WkwTGNznnfSc05G9tAHqguRgN81U27iUWEESZJLCJjtOwrZcTeBQ2PFFg==","signatures":[{"sig":"MEQCIBU5sOhx27gnf/3/RHgARXbRXAFrvlssJ+7crouMwexoAiA4bI6AdteN0z4KXTR1HdKt2YBk3/a8eLst1fyoXIwR5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBMCRA9TVsSAnZWagAAMOwQAJFk8RHaM62HBA7Njx6b\nqFia+E8UPm1nMDAtQhyjDujtI7AwNLA9/QHEEj0oiVS7UfTI2RLUO/MUGB9U\n5r3p8LtzMiqvHF/ZRqx7xMitoI0ySP4uHMe4REIiiFP9J9CH1G8aEAxTl9/l\nE/FUPsm63nfEZ7s6jVlxaxraYaic7EeU0KEYbCcmKhSZekJ9nWcPd8SUkgia\nkmb/BNJvu63zlG6ftWFsFSm1xysy3Xailt5x2NIEv6xFS7kxHO+yfuDEdjkm\nT6eznPLXrnVHxR6KZF+Sms58x+VuqQFtA5zfZviEm6xV2czE48p949ddNhpc\nyK+rAMmtcwG7Vd0L85gYLjg1VBR5KZPWtaiLTvDRegCfTzzrLn+Pyaz/ANGA\njHbWE3Hmb2JEPmzp32TcJZoR+c5qtOSh9DSResJNRBgeVPDrx/axFXxL1RYO\n0mzTpw0eGqNIiUDzJMu6qibNir11OaKxuhZOEjYdwzPplKosA7pwwtiPWHZn\nhTZMtbUm1N1mc6zEhgbBAsySafcAsHUjzUc8AQ5iAMFNbPXd6NvPaCneqCNJ\nmff8t9L0CMStZr9k45WAhOpS914KVJFflnC2cNsoGZTdFr9367d9hziWk/lM\nj6d1pPQmYUJHElEwB292XdUYxka42oL0N19fYmwAqDkgVBsChsDaNu3OOnLO\nFqlj\r\n=Uiq8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.afe0dd1bc.0","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.afe0dd1bc.0_1573486667956_0.46559906149450714","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/slider","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cc2c8b9e52b0c49553bc1c474d6a1e8bb80c13d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":31,"integrity":"sha512-UPDYvrkmfZn3gSmBFVl4YxeqEHTlVv80dhUYQXZnmcLeLLZlwJQGd1SXdG5uAsR/3stikYXfO1/3ykUIjPsM9Q==","signatures":[{"sig":"MEYCIQD6bi7zAMWlgTGSxYVmKJZEH4bewGNDC4ll5T62KjbzVgIhAKvp+e6kyQ4A6wYbJ1FIYaOhUWg6koAWSjLWt6jhHHdx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXm1CRA9TVsSAnZWagAAFtYP/3ptlDBBTcZgtVJDordX\nhyald4T946ZkAFabenFWrfgwLjxngyVGwnyGqFHY8tFHNHmELnS8qOJrwuih\nlYG3mAmJbYHRWbry7WO8MnRhiSzO3gpEKms003Brl1WcN1Pm2byBu1MFsnoX\ni6ID9zrlfCMX6zCpy+UnUkJB3GhdQAe/QLRDy4cLCLkJndIaOQsMYtcOcVC6\n9vdCBwg6j89B+4jRjBPrjWuMkVEjKyDgrBzhYIA88sfKY2btTVsefCLWB9+c\nCU1Bvp1es11p4vO4XxcRBl58DAaNk0TUq18bbAedjaAE3jrXqPH1xC/dHEoP\nD7m0noGWekxLRBYER/BOIBQBkegkra3xNzQjRTnSFSZERXH1qVch4uJpHSN7\nSkspxoDZnFRbltmi3E/Eo/vJxOXcz2JbnqdZEK5B8MV8/Ra2lOg34AjNhmof\nBBQyTIWmdBKhHqnkbqkATH0RvhjnIi5EV0ujns9VWroteL1qa23F1ztL/wCJ\nWx4S2EWMlzbQMFyTgcG69FXkrLOe2N0Fw0mAPXp6vv+/cxro11UyQsFjn4xp\n0nVkS2SRLmWV5n20WB2vlFCeEN5q//N61jDx76Bc83JXx0GKRPAuQfZ0iIcU\nBNtobfYWZuTy6PfBnHCBjEzota8ff9sI8krvusMONpZx/lyB1or7p3ECiRtE\nJlei\r\n=0zM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4cfdc40b.0","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b4cfdc40b.0_1573747125445_0.5242961649467506","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/slider","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53b97f7cd5e95eb948439790a4fe17132e522578","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.525989b5d.0.tgz","fileCount":31,"integrity":"sha512-jqj27kOgYDx6EjgRjM0JLaK2BHPtcNJFTGBJv/lMN0l7lxnnLkB8d3drA21elQM1EyMjAFet/w1Osqqbq6P3DQ==","signatures":[{"sig":"MEUCIChKrtdA6PhfVX+JI2V9eBqturlfMn9jhx0TpguAmFt5AiEAiN7uxTMD8UgszzZrmkLRtyH8xTt9v1XsH4J7diKIf5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOvCRA9TVsSAnZWagAAiNMP/A6d2IpowQ+WpMbw8Hwf\nVPHzgr+hBLM6QUoRc3Y5g5FK1vyNnU8DDd8ot6x9dWRam0XNhI1EzgXQJUDb\nYvBwQyLQCCODygVrSduXyy3To5OmxLHHg9Kdhs8Zs1TRm6zmiT1zh4Vz6DKz\nOwSHznYcB0JzBV09Um9U5f1vEu2LJZLGLqJqX/gMtP47zrsJKgdH5XMeWUKT\nDmof4zYjeElDBEGbfmmqne/PeToehqj4ykoprplEx2kGLWuJ2Nt61LjKVaqd\nlEkbkAyeL5dRqqRKTcJqxXh+UDgYNpfykeRfZMh6/VtzM6rRyYnBUlJPaqtb\ni5AjKwSmyv09lo2OFdZH9oBwXNlWOYwciTn5q7EVQXKiA3hYqNLYEDwi8ptT\nqySwE0XblgGcFvNRPGiEOOF4bQmia/fbMEeGynh85WRvOCSNSEVfHt3etAqU\nlXBEa8zI0MmYV2cGyDGZpfsh9F/fgFkl0mwdx9+0gO7YpQjfoTYIYevQJWhO\nlSBz2lHKQFrqUsUURVe+kx9dIJTfhyjTjEILhagSpX3NOnXdfwvTZ9sDYW3j\nbglNecALp+BzeUUpy08X7gC/Z5B+iKT2M6/piE4awUEDT9vG7kChbGYd1LFC\n5ImMtbs30sITNmys3V7h8MGyXx01bMLoMKlsipE5AicUGG8v1yPSj9t5zrrc\nrCFi\r\n=iYAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.525989b5d.0","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.525989b5d.0_1573774254561_0.22756656660436336","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/slider","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ca718ddcc7fb8eb260b25c4dab3bd689b61559","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7084b403a.0.tgz","fileCount":31,"integrity":"sha512-L+yBOzpt26SomHkKcg2YfXHd0MKxhfBtVbyow4d1spJp8kqug1/E4C8mgk6Y/TOfwybdBhdj+yci1pVUG5kgVA==","signatures":[{"sig":"MEQCIEotpNtxStAN7iVosEQdbeuu0iqJXaovei4XBINebeQMAiBwWWTtkGe9NKVEUFoWy/UcIBgr7EdTcSCmR7iq9/Ib9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfn5CRA9TVsSAnZWagAAKMIQAJvrrUXlmCXYoDNdmrf6\nGd3O8Mqh0QtOCPaHxkmRo2VxkbO0CKb/BtM6tFwAjvXk6N+m8HVeXhGLqD+e\nfNOgWCvXlXZ+Mw2+ZEWQf+LZyphd1Bb79RyR39PpuUIsDMJ+HKpT6SssH6bS\nDqwPOQgM3QWRPLOI8Y+XEZh+7E59cQNKirWeGcFnDQiB85T7sS2NlmkXYZGq\nyAE3fqLIyOdKWyG1ECRsVmCeQL3O/QXjlpSA6L5whE8OWZGH5GvN4XXUWKIB\nXK6hR9lCU6X6m9EKMhidZX6JIRhidfRyDUJGiumsDFVTP+SwXwNr+4lx0NuX\n6bCFvek0GjPwTVO2R2MqLhSLElrv3oqVGStC8qYIYr1maRr3YdQlLrENuNKb\n9ZDKDV6OxGiPdblyJcl56M5SwgtL7jFCm5kLHrdwwmmoSq3V8OqAzxixMbWC\nALBAud3gmzP/Huaiwqiqc1I5Cvokg7Sq2SK2NRXysJHPSDIBt/d1RU7MUYor\nWFjZezdazpvo+VFaJfN1PnzqLVshqLwSarebRiegGP/amDMhDoiW65TM7+yh\n2sAVSAN8WXKx4jEu6qqSCZF+j4MOL1W9cHYmCqQtZZyjgckkriRukrFs794g\n4wolOza3J/pnHfSt4d5jQ4IJBlkhh41TqWge2C9KzW4xmNezq+ENki35jwfI\nq5hD\r\n=x+VN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7084b403a.0","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7084b403a.0_1573779961139_0.6384908781454743","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/slider","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd3052fc2d60a35f3ca1cfaedd1d5f5b95d1857","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.3cbee6dac.0.tgz","fileCount":31,"integrity":"sha512-ifj0QMtfG/L0Y4AB0E9WVZNde6DotSi3JXDv2kwBHdZsuAQl+HovVk+hsmCeID7d6goj5M7UlPYVjnbzO73NhA==","signatures":[{"sig":"MEUCIQDT5mfNt6dogBOkt/CbeecF4MzvMcEjUQYaPiuR4bJV8gIgQSE4+hjKClERW9Bo0roupkGfFcEKGIYnhHhiQiOvLOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeZCRA9TVsSAnZWagAANfQQAJmi8fT7IEn1WFc0IsV+\nSZoDV6ALnmDSNrH7U0+bWzjjjBTOnVrSNwJqvc/ioSIwBZjdNHK2s+S8ihuy\nw48e6uQpJv8QgELVmoaqfta/j5LNANPWuXye+hRlOdzw6T1TEpxm38tnKxtA\nLd3gITku5Nd0ut3sqX878IedNomyNqUuY8wtCK95EfqbI58IUD93h4V98z1N\n3cabz0bMuYYQVbBXsVZuxEMwufozad0xGFQxN7Upw+eMIfDqRAkGTnacGqsg\npsDs0WIeGB3KDGYgtbKBzmFF9XJtFXhyb6yVh/QIbohYdpuHTB55Dsj5Myts\nBdEn564Rf2rheft5BxEzm8JY4W4GZnxnj7XPCE3joWo9SaegAubvx9xIIu+g\nEWr0lxF2HG6td9zKhkKMMkkOeuIKvDk+xXKF/gLhvO1JG11z8UqjYn5di7o5\n626w/A3EfVyZnKs4WvqUyI7w05Be5ObrA/5b9vDhlWW7Pqvsjdu7LFbGmQ5C\nGJBOJxA5t+JtJi2z/L6QhE2QjyqTPsng5ulLBfoz3TMzaBoY66e1lpkDFZXM\n84gvdsBrpVYmOMmYaThhUPxtrl012nekNaw2DkOrVUGI1EV6Dd+uvByoddcj\n2I4AtJb9cRaPXdoz2TbJlCMTki+YH3kRKLpYnjGI8zFtqybl3fa6f3qIufoH\ntTRM\r\n=9ozM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3cbee6dac.0","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.3cbee6dac.0_1573857176768_0.6719902190582461","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/slider","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9827ddd56be541be8267c871ce44c03955e86f5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.591a6ad44.0.tgz","fileCount":31,"integrity":"sha512-lGas6MZWCnYD1hlSdL0UG6ev0S7uJQOUz3ZFI/97CmjpeNmzuQbj4GDEdlnyMSWooeekoXle3C1LqcgXz4sX7A==","signatures":[{"sig":"MEUCIEXIarfB8iqJhfdCHCNlShQYv91q3prpL/U4VqRrjVzQAiEA14pG+9ZCeZNbG/jT36d777UPfUvFqmGW9H7C2/xkAzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3YCRA9TVsSAnZWagAAH98P/0byc62qmG9tPE2VeFkN\nTTvkF6rFzyh1aR4XnqPgvfNx5ekLgOYwqzTBe/wmEKkoNGnOhjszcdo+Sef4\nlW+NjiZWeraXQkbb+ZatzzB71pp7yFoLsu5Pa4boLjG7Cq3vi995C9bqe2S7\nPsYdDnN42Sz1po1vSnFrZO0llYEzvChrgEuGhE3hsXIcBHen6sQG5dNYzCIo\nEtbXX2Hjnx/MMjp1ZAzbQwla2P1/6XXB9Pk1+16zrKIJNmZ/v4XDVoBfdYlp\n1Pfa8ftYxqlwvvZKpe9lavLeKVquipECbL1LOnjsdH5P/IjT/9WaPAJrohSU\nkmuDGE3d1gtSGiFq+HUtHn8LkCcXa7yvaEYwugd/w3cSsJ94itRDPLHYPYf7\nEhEx0CuZNv0/vWfqGgBkAexnBjHpWmbQCtNao2oXqTY97/IVOU/0BFbIRv4e\nxiG2rAnckBh2Lx710S8IW0PeIyyDTBwp5xnKvQff8U5yByQgmcfjIo7EDn85\n628jqUbykBTQ7MTkQNYyckGbFhbppsVei2e+umOJxJ7s0BJgvoXlK5kUtT0P\nRbB6QdaKMDa9OAVCmWVhl1gHg6z+7a+n4AGT+GffXzW2A3MEn4zuWwDYTP+E\nTgnja9rHZTs5d46PeqbjbCgBScnW1bie4ewXWAZI9Ft7Ev3Xws4RIAcmOweW\nI2/2\r\n=KCpZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.591a6ad44.0","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.591a6ad44.0_1574120919702_0.014043148641753156","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/slider","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09b19562f1c1b00ed0758f083ece45ef4c6cb17f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5729943ba.0.tgz","fileCount":31,"integrity":"sha512-ucgR2Z5Fte246s9bGRQckN5Oy912s9jkWaJPbb/Bm2ngu/IZ8mEyJ5BE57pa/5wYkWDvUy+U+pEZCderUyOhvA==","signatures":[{"sig":"MEUCIQCBKOlHYQgAJExDgNbQJWe4Jx+Rroq5Xg49O7ghUNmR9wIgL2h0OJZzY1NfBO/1zgb2ZL4lLPDsIfRWe3hEF1mMUag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":346843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzkCRA9TVsSAnZWagAALpoP/RQxrH67dfrVk1n7l7eg\ntyxj9TzxzRa7G16dnnCekMT0s82IxXzYDeKjhwGIefO6j31XAW84WBl/xYrq\nvfhpO4GGlV8Po+5KJJZvl1X73lLx6W7vLuUHa6BnZk7MDGkBVLXCaZ7q+KiJ\nbe0n+ZyXz38zc7wfbPlCYGaiLbgBu+hU4xERd0MsrNkIAeaTQFGMdtZSYpju\nlE6FocPEB0blz2a2tIupVtSZ9CDvxyXQCfHZmu2adikX/0M62YdXHXIQIxZ+\njoBT0BBbj/I5TaJqpCqTlEsvsyNy7obkULQgjRGTHJEsy3GV9vb2IR97l7jF\nd8Wx+mFA2IIYmzzoYOJ4QqgpCEwcKvsjF0BUdUxBwWNi9Oj7U0z4TAP8cirZ\n32gHygT2lfp35Wf8DfsUJqJXzJG4N6NIfgdMIyH3nmR+cfif3WA3MRjXs6wG\n8b064DZBIUAQKlUTzRK7z1w4udW8lrAa5bhCCQJjNbF4+ABDHLUVHfMOgFy6\nDqEG//jb+3hA+UommaRna8Rw5RDOs9wcrPmCbgQaxZDFOblgjT5JTuUsuH1p\nv7f1+1NQ3SjW9srCylof7gHfFl93wOoJZPxJ0LMvAoNJStdcsVn1xHoSy8R2\nPjtSvPvQvS0198rDSFpgbXXq1fkPxnal2HpLbJmJx68anHDQnV6Sbvwz6DPH\niICe\r\n=c8T5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5729943ba.0","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5729943ba.0_1574227172018_0.7940515288532877","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/slider","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4245106bd1ed8e208d3e751b820b4758762e5f3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.e89750dc7.0.tgz","fileCount":31,"integrity":"sha512-0P61RgITiPt3M58BLhNCIClwJGL3CG4JbpdrABLdV+J4ngNoiVWalEZH7PEMPviIsf+7Cv0nlkauz4yd7Or6lA==","signatures":[{"sig":"MEUCIE8acpaO15xebcxj9ww3d+bFj9oBua7NG5GBFfcnhYIrAiEAha16hRe8VCoqxg9lJgE693K5r49hjxlKKO4OzmHdVFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr0CRA9TVsSAnZWagAAWfoP/jJx9sU9CFq0cJXy7Ltw\nIr8TTHE8E3t8oF0V4afPdnX7EXJKs9Gqj+oTKokVzFQZ0slXGaktELBCn2Bu\nMoQ/AswXq0ueg3v7OMYomkgrda2LrTmokdVXdUPgA7u0nWjFwIL1bK+mwbRe\nNILquwDT8PGsBMwO4dYVK9H/tSOsfVDkdDHsA3aekjInY/sXh0FEvaRAB7jV\ni48GR+xYRLdz7qhBZcLEOe/f6ZzamQIf0CcI4hLKis9gk64sQZs+7RzIDTsT\nege4AY2byEz5eyFx1oL1irmL51KyRPYdjCA2RlYgogFAqrF2p3gucIb6aK7D\ngbVMbdYe6ih80jCPTOrdqyuqzcxloJg7XaGJfDN8AYJ9FWv0vKxftx+Lc8EI\nyTFM/3k7kjimgRhUYuNs3XBS1nSFgKhzBwPXoY/TDiNqDY7SEyveObZ0i3wf\n4R2On3QR2xuSwpCCKGMrwHtQVx7jV7SaR3tVyAi1v8UlBaHk1djV4C5QJKl3\np/joF8MHI1bo5DwRibF8c+FmcB25RIlDQaDbJv3F13ZROH6iwp1Nh7L9C3de\n7Twz2m7QBOc+dxBjgPba6qq/XMEon0SrrC4o8bLeGEshcUapR7xKWFcvIkM/\n0lrkixajflg6cCR0vvW8BkXq+IirzwGLL+6rgMPeWrHX7Zjsy6DuIr34YrRV\nYyyq\r\n=wdgN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e89750dc7.0","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.e89750dc7.0_1574820596113_0.737169461462071","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/slider","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb8d85d5230de688bb89a9ef8a998542430078bb","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.3e560b33a.0.tgz","fileCount":31,"integrity":"sha512-95xNTfzaY8srz8Answ7gvlv+66YBMYt8yHRuV0AQa2/5kRFP0alqHOOa5DWwJn8rkG67w9v1kvr5wmsUPIE7ig==","signatures":[{"sig":"MEUCIQCKMcnYcB49hVarrg3O5MX0ws3ahwXZC11KjDp6x8+K5QIgdPu487nkG8kkJ89d8zSLjT41Iq/lG52T1e3/bpJKs1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsjCRA9TVsSAnZWagAAjxkP/AhXKqh75MmkRLyb8M8r\nsl4WrbVyfdPuQww25/7iekCOg2ktzi+oJrFp8dznMmyAaGiMz3BGPoWBIKkc\net9B+siNd5W5m9NAvf8UusiJbHbY/Y15pxd3oldKpxJkn7+eiDAi6QoGfKGr\ng3QTvDhdyP4UsviS0E7mbD4V4tDTGHoYUxiRkAg3tM42ewF2yEznK1AQkXPC\nDeKeVsVRtCLsQ0JHdwqpNSu2jSi+/6r+ZM94AghKthxJ85Dv/RPoXa/Gy8pr\naTcpN87BG6UORGYcz0G3Wv7aU1Ni8kXCeorN3oEMYVf8YsbYw1v3rFLbhcxr\n9h1Mn5jlnlq/fEgl3219+SZr8T6vBDNJAYxtvxhxvl0Gs/6uGzs4GhNO/Qpf\ny9kn77afRWrFomdKBxwUEoQpjJH9jni0M/Xw8dYp4Z2UApmpVrrwkWJfRKPD\nVwkqJ2uy5DU3I/+HpMlvGHvvm+yB0jXJGi0nZCx7W4XCvU5Ra1pqtdeKeZos\nCnQHd8xjWzLvYt++Uy90m7hJqwABdoJheO7VKcHdhhBL3YP4aNTElisWNvpl\n8yLStO5dTXwOx/rJNW8KctrDaQTciPHh2wEN1ErouMQu6eOePRvN1FZmSBkf\nbuu3FsNfQ1Ax8saVZCg3tDU9/pbZSSKN6yZXnOl415jLChLDm4k152elqFK7\noeYN\r\n=pQfE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e560b33a.0","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.3e560b33a.0_1574820642867_0.8116113310591566","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/slider","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fa40f4da14c8e1be36aaf007906a447fb21345c","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":31,"integrity":"sha512-tJiXfoXYjTRCLZrDIJ3L3m8akMPRC+61Bax8Thqyyrla0QdVVdQ7UWWMrIuJUxGpXsydjm70gX41/H0/HSaxoA==","signatures":[{"sig":"MEYCIQCR7JlSuA5/56NrdTzMHk900mXrMxDQ3MXTd9VJJfGsJQIhALXZqjVSoqZIptMb1dBMhc5SrRSA0KqfUv+8t9g23u/l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ds0CRA9TVsSAnZWagAAPJkQAI16DzYzUmtrqhC6BK1J\nFpbKg2sN5RIfRbW16zP8SMvi6yWc6nC0qkmDUgBdZjD2a62jd14Ms/j4kf0o\nikQAuP/vIxXQBYfosxMfUTqpdchVHSkmR78wHUR5NzTU33XvhzVcOm8vLggb\nnSdJ44ylOdcsMXtkierdKXSt0iQDf/C81HR8byLvMTXDs0bSNaDMSn9inKLZ\nGjykDa+LUs5om//ln/K/Yj5hA09jxL/imC9ZtAKF4Y1ig3y7lZrtNEb5V368\nCGWnZXLWlm7BC8xHaKxbc9Uc7ODTu/+mv9s5+rQRhE3rXThyd5hu+gjamQ5K\nW5BFF/sP4XaaaONS9ERURuUZ+Tp3u8BCDVLvfhIQk/rj3gbM1DIwvcQL1UlT\nHQ5ulNk7gtqx/vJEZzhD5p+JxB+Gs8WMpbAhgBkaU8uoXOjiWGAIV7dzKL1t\nM6JqtRK+t9Yox9hTvvTdJn1JO7wCYv8muqWXSSeW4rrYwfKxUffmW5lE4dPG\n/YO0YOqdgUOouR1uZXTQlnRy2SIp32w8jN2UCgcXJOWaPa4mLDwJ/8oEA2CV\nc6Oncc+SsxWQpPT0R5qcFhe+/sA4Njc0Bw1dvhqWWRIVnNPosbvHj+oEvjZ3\n4ozLNlTM9ES+vHUbATf25CKzCmxKj/VkEHSmKHlum6w1GL8IZ7x8xnHk7Vcy\nUSio\r\n=d8ql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7fd17ce5e.0","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7fd17ce5e.0_1574820660535_0.949658892256835","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/slider","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f42838173df50e780b72e50785ebc9dbb6f9294","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ec729683b.0.tgz","fileCount":31,"integrity":"sha512-Dj7UvN7i0uA1rzuHnHUx8/khDLD3GIQySYZNw7FpDKJIKXLGHVUrO3rWNrszL4iZWklmd5Le88B/fa8P0ARRdg==","signatures":[{"sig":"MEUCIQCler0s6MPTf4J6VYjN7j/EPliavI/6omeO5q4nxeHC2wIgC7moS2AQFkqI7Y8iw7W68OVwuq4ofZsQKIApW4RvZU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxgCRA9TVsSAnZWagAA390P/jKY/LD+bMFJoEG1Ngui\n51BKrDtVCCcNcBPgoirCi//azGPaqyCz+0a9xszDyokBFTtS1ffUCGaWBkmW\n+oIxMBcZfYEiHu3/Yycj1hv/fzQD3IHo6iDJIRWruvImHutUJeSrDcjiQY3s\n7drBn4uk1FtNZf41rm4HUu9KXpYkRJ7eIMVFEVtDMHQCo54OF83i8oe0GOfM\nw+rjpDHxeII1fhYQsixamy77EIHq1sxiWdiS8J9N1lKVx3RXtKAkfKXBkT1P\n2gDxABcG7D0z0JyuKiEm4ZFmBR8JU1v7L5RDZEQ+UN4qKHNHk0mw3iExQtgD\nKJevZ3L4zSJ1hz9r0K0Q3ed3gEaCshoTIvpAS2/Pen9xwnTOSCPknXOEFxZX\nyQw/mXl6fM/SnzBuimnzTVu5Vgw5mNJUnhj6njdH93HCOJFlT1pqT+MopVLe\nLgvm3tZCdLpeeKPrlHGM9/v6EvzfysXI/s3+PYC3XqBmb+y1HKeNjYrRX6Lo\nheCKOpUBqAUf+w/nJTLh3InIPqYFY4BZbzEn1xQF8M9Qn50Mqh26M0yJEDVU\nRM3LI6UjwVVZXhtWPBVvY7Tdh/NDWqIVw1EcFvzqHBbu1SIMvtL6Elx6vabk\nkHY3o15ZVo/AJXut927Wp7jFL40ON2fw7+3wMp9Z7CczFxyAbv+9fcn2hzeK\noz3h\r\n=TXV4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec729683b.0","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ec729683b.0_1574870111787_0.32684428376991836","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/slider","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfb8edad85b96c54e3d4f4fe13223366b1d7d7a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":31,"integrity":"sha512-Sk+OjM7Z1hdA22ZzSyFyM4xP3qTWa032/xxgnaHS9uxbDqt3GmL2X4ZDCzpfqI6LYRtlwNXnSgrNxECQYU/E2g==","signatures":[{"sig":"MEQCIEzzLvQ3YroAglRJqbmm8jGpCtNRbHso/ppQFeoRJCyKAiAZ5RjEh5zRBZp0hiDuZ88lnB2Q6QUKxDGTxINdyd7bzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sulCRA9TVsSAnZWagAArpsP/RRXfDISWwv7tOtuNwYP\nwGTji+ASi/pqYO0pNmYnmrzeDiVAhEJ8Ofu9xhNT6i+P3v+yJ3jsSjW7MDKM\nvScj8JbTxhHjYW0zd/dRIJxxqRl+SEuOx/k3Y7QTH/F8a72EZKW3qP357HRo\nKJpnUGX4yXq0DUumYQCOxwUuxn1QBz91cTFtB+sfi0pz9LjYDYdS114eO5Dp\nTHa1qaStRl0PC69ncJGzvM1nb3Sw1fkKEVaWBmnqLpgst852KtUbg2RZsCj7\npanZQ8ejRYcgfLZ8S2RDWVqM5b7t1i2NAn3Cmb40tad0ajpVXe0nbyCE5yn4\nd9cJD2Mj6ukzDFBTtKT9256bR0oOm/xOs54ZunKMIU5tzUopyBr8tK7t8u5W\ndCMW5/PmwdoBv7FN5FNC9l0YEJ0URcZd/VyuJcKuIn5HAUFkTPfJ/JWtFHiU\neNvnyvptChP278QsCxJru0OIWJYJgFgLeMvoXEGbVrOM1+usLy56OM3UyDIK\nFWaTmjzEA7bQuhuzg5xrYwg0rNoRkWeqjfIQGlvncWtdMv5JDTBU6UwyvAcJ\nkpMxwW4tUHaGdZltlUP4ag/8GYSLeoO/RDH9gyS+v7bjMbInImiT8y4NihTv\n3mIq5zIf41daPQl2PE29XX1NnqV90aGRnylaP1ov+W/OB9RmClWmcSN0dKrc\nXZ+a\r\n=LhI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b8bc4a26e.0","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b8bc4a26e.0_1574882212861_0.4869963549722649","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/slider","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa179b7005c3921fd2e07172d99550c7d65e142f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.f978109c3.0.tgz","fileCount":31,"integrity":"sha512-h6UzJyAKAVOmDevuYLoKn/MnlpJRdDNI3kajKXzSJFWKzoOnz2fwvVJG0noc9XqDQYt3dJZ+fvlaX4qHCIiEZA==","signatures":[{"sig":"MEUCIQCEmI4Z8o2m9mEhA1PJrnFc2v7vHcckAal+8CT9Jwa0gwIgQmbt7/f1NM3ao2xdd8rGBR7rMxmmDM6GEaH/mSblMKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTVCRA9TVsSAnZWagAAmP8P/0FfyZVn2SSNdCIMWQP4\nnR5LLJQsvFPOeLm7qu/wFKVQDJFSaHMbzSAc1uV3N7+C8t13lBOCXGh0Y5HB\nu8qEuKYkwC2SO0jshZ5rvFsylD+d9+/iN4FnjzTbByM/ktMJqb0MbezCGwjB\nM2gZkjqmc+2ivCNnW5KtVMAlqf+2QdzpQo1uKe+JLyCS1n43sTqwY9SUejEi\nxBPba0hU5liLJ32lOPGIJFqSUGekPmIlTpsOK8PxYlMM7bpmbtrt/VDHqkzc\nVIITDUqSqrfHoQHH/jtGHZpkblABbr1yGgfjkFi4aWLLhw5YltuvGFIOGIIV\nEROxtQe/4/PTGxkAzo6YTzStEx7AVOWhDzoJp8LmZHGOGL4HKbci4tIDWt2k\n7yXTEEdYeYOTkukAQn7wfU5sFQpSmnC9NuD9oKB0pneeHhItlMKJjlo8om3c\ndMb8yhJTV0qjnniNS7BKWZKAG1ovUt57RKkh+JXJhAf1N1h9TlkdvZvVdYj5\nIdhB+4qtVKpOA0sK7CqPz4aj/augSF7TBtQCZdTQeWhK/7+ntL76GrwbXHyI\ng7sHXAgHYRbbsYvVau1uZNYm+wrzvcpKV0ZbHF/KriTnWwSvICK/WZVkyq8o\nq6AIOje8xK1dEXx/PhHrHacQ1Q3rM0rmsUWI7SFkuuII/KaFBOJglY8xD2Bf\noUYx\r\n=0dbp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f978109c3.0","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.f978109c3.0_1575306452777_0.8638140984427116","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/slider","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72f0d237bb089157fa8fd7e333a989d885daf770","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ad9dfe706.0.tgz","fileCount":31,"integrity":"sha512-yFJenlVTXrV+Ey7uk9i529A6uFhh/l04FHgvUnM+ZqcQhiWfJ4vmQuc3uUlct688pFjVQHcbyZhYRyqEC/i8QQ==","signatures":[{"sig":"MEUCIQC335i1uotn2qn+ECNLAg9S9WiWJPcsEuH3JXPFYXtvMwIgDpV+B+OgIngLYxcn4X/U7OOe1k7E1OxkuPQMYCynx50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u00CRA9TVsSAnZWagAAfr4P+gNzbfB7iW1u1Xn4JgpB\n0lDhVkZkNfAyZvcmleGiKMdIsHq7tJdsK7Sqo7yDFQEtE5PLLRt3MAcw2SJa\nINpDUNlvH6Ap5WTvNLGl87RZRHBYAYIm7F56Sg8nqAToQzfspSYFAkDlZ9HS\nGDigzFhQIceFAUbLXIcbyPk/SOWwtxOvbbzq164Qr3eiLe5pLkpyP2O++SOF\nljhl5FzVLyt6Y0A8si96gjWxDGpkV6RA6MhndsuSl53BHCltOXWqfOiDPIlG\n7iFCNXkClS9tHCTM2/ZbsntN+RTG3ubw5YMTDSGTpHEwvftVigiG/CCMMhpB\nHcq5XTUUxspjvn+tTxZHqqq8qBjmFUU4SC6UMXabyIASEgIbj6m2SRYog/3h\nlJwG3DqDnaw5BFDKEDcBKMOmQGE+b+MmUCOnopTLtCy26WwQFmMXGhCfHKB0\nHwd3YOQnFuqzVCdPaC7yxIC1o/ll6HrDG/d/H+wrcTfB5qF6aHqsAcM9Uxqz\nxb3La/XyqjsNXAZnT0JF+X81MvQPcZKgZ4DxXS5+tABlGSL3w1VlD4dKJZjr\n9X6d4b8hA/BKmkgMbwhnyihTAPBCYJ4tEWtIB/zJkHEg5rSYUWM8z3/u8sjb\nR3biuITjyyMjvtW6QgBtFmBXi7FQ2YWs6ENVMV4JhXrF1nJrcnwhZOZQ35+z\nDexy\r\n=ABwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad9dfe706.0","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ad9dfe706.0_1575415092539_0.12499366481083163","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/slider","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"948377932ef75f0b2ab8b729ec8fa0b485fe4f09","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5e45d77f3.0.tgz","fileCount":31,"integrity":"sha512-36IzeVgKoOz14unse/lt7n226FxDhLB6Y0spP8msRQjUby3tHcozX61o9jGG0KnFsX4zt7dKd+xfefLpoc0lww==","signatures":[{"sig":"MEQCIG7YR6vsm85movmCWlkvzshpFDlkfoaAyRkd1fNP09wPAiBUWJeWLBflzMkpAYK2Q5TFnzX3qoZXLrvCmnoie3HaRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2DCRA9TVsSAnZWagAAb58P+wXlfvKKwust1Xlhp+9x\nTExN2G/9GmtrX/gxMgxbqEsJDcAlHMmV6V9KmeiOkEoowuCkYD3UbkaoKUU7\nZcCE8vPfRuBgBNS6ve3oux6QZ+MntPu4qxiEiqQUeLgrUhO5vPVbFY0/4RP1\nNi0j3mpN219NvgdF3plOYTMrrYF9KupDcDz8oS/9UDzMDYckpMNUnXezcxBt\nv58n2/Uv+jkA3lWodjwrM8xS5mLvyle3msaQ1nxLgIYeOtFthmRRjgaGBgVd\no+2sfUZqONOynkrjkKCdHYzEF2MYeRAp0PLBp6f3FGV60hguFdUNzwKwggfZ\n3h9+PDYU2AMy/P9iFtpUZlQvLDwJjb6HcZrCu60tksSjeIW7KttZJnzUXdmo\nUxTtFjvv0JZW8pzhiUngwCEPbdjz2GdK6Ky8e3Iopwwt3eMwB4Kk9YBhdxU/\n1CxTsUglfMFzv3hBqNb5dUBysfKDYNKvkkrARZBs/grd0TtyBOkRN8tTFGL+\n79cZz3RgJrPxOfu3gq65v0B5PE69jqdTRa4q4e9YLAIHgLeIh1cdx4er35xq\nAnnR493UHTNeFRu1hULqZEbCCfBpWAxNHzFrTV5zUtwOdgKrFuFcgYMdoasB\nv6BVe4byKIgEOUIX8q1oUrg8E/HU8rM7fh8Rr+AM+WVWxnhQIQI2iLov7u7K\nzr0B\r\n=Zac+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5e45d77f3.0","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5e45d77f3.0_1575415171269_0.012806530768184388","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/slider","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a421ed1c7f78fe674640d37349be53fb51c63eb","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":31,"integrity":"sha512-hcZ6juY5zrLH3ee+XpDpelxRf454rHyg3nCHaVatrDKMcym6cvm7BDjOTnTaDc8YT3NEpj+j0r68tTBsuFpTiA==","signatures":[{"sig":"MEUCIH46JTFYliAmLv2iIRl3KFzWcMvN7GZ3EzwmneF/lXCEAiEA06z3zH1NHzcmxzYGgZOgpT/baMLBEYfK6vVPvQYGMqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u28CRA9TVsSAnZWagAAD6YP/28TosZDfrhcRdrf937i\nhTYuFEqJfc+WxN01bilP3rb5bB5BJrnOS0eimdHwSIWIVcAKTCVYaPQjZpAg\nADZiWY1FAa4QPC1y4zDcOX21HJHE+ohuEoxROxd4kecbn9HvSlWWec3GHMq8\ntxBwu0toTcppSVSA7gIW0K6Ktz3CUcBNULVEZjOFAmejG02qgYh5JXWavg5b\n05h333VoE9u6QqQ+MCGk7/lDbjV+xNcEsaUYUsHQhLPX3ECnKrdyGy795bCI\nv/jQGJlSwpiEFTRhB8Tk7iQ7Gm+efFCfd5M2tSxW0dPNLSxaX9EE8WrK3WNR\n5p53bX6xQSR6yZOm42XelY8WKPVtZPg8zLGjgzZRxJWK3MvAZmzb71ZW87GB\nQOIt/L5tMXDASN96jaQpRQgiGoUxcfGezvZ032XBXuh70P1/xykthMxJ5zfx\neh7CnvD72jYJM0tic3tR5tSIhf+dY44lHB3UK5AFCpKviIm/NmiovysP/F9Z\n95s4DTUPVrQnzDAQshPrr8i0oAgTwhaxJjEFiWyFpbRPoPq62JD/AGEX2EJ8\nmkSrhRTHIIrraycA2AzdW7WU8xXN2spPVaUrCRVWK/3KFK83TNYRNaPBc0Wf\nHzGfGVjQbnb0xgU/Ql3fxTMjHtsGPZ2uy0SgpBU91b0HXUDdDtBwdmy2dg9S\nGQ3n\r\n=DjIB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d10e8cdf3.0","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d10e8cdf3.0_1575415228344_0.6361263373323256","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/slider","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e062c958039c81981d2bb00e5f38c6b0a4caf70","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":31,"integrity":"sha512-MPOtKVVoaJYP5cFU/kkDTCk9ew1dntqnBoly7tYQ1LQkUmOU+wgrC0mWNS7noXv/p2NayU3H1zfxnn0NX4Kgqw==","signatures":[{"sig":"MEQCIB2WcOXBajtN92Miecomwg3lwg1rLEiqVFbztbd3tU3NAiBHroGGkP8hB5+LSn9H+rtBCuGFjr3VsMFhWBhzqAdCOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXeCRA9TVsSAnZWagAAMHwP/ROi7CWXd64Kty8vbCHH\nBz20zhdimkCi+s0V9EBJT83JJB7DS7/02FEQmYMZDp0Wm2B4k/SZ+jvwc5kj\njThqd0HwsqXZuI77AHXXg2PLhZ8pax1RrM2APklOE6045akHtgZgJxg5YKTU\nlPyGWLsnkZNR3QRtmzFhObw09O5rNeQR+oUW29tTbBBssOtfDV+RsDq7rKm/\nEpl/PWjAxXnoeSFA6u8zGA0RZW0gaWc6lCB3kHJ3Rn859QkkoSxsj0SeUgo1\npEmyypLndXOpma4CPMIlPoOGTWFFPI/BY3OPVrjSlbc1XTJoA5ezH+b6WD62\n2uiMfqdqYeAouTVDlMmhXJYP5vV7uj1/Aq38uoG+utq3pSGldmVIJjDAJIh/\nKXLMWWVzLum4HYBRiBxyZW0c0fg9qBwQ04f5ppwGCP954uTiLTzvN0Mn7XYd\nmjLNg2kkorGOcBmwtPbEmFQf+a+C4uzvkrMhONcNtsRI2c3njE4zqNjd0nzx\nXZpUg+ozgjyAJ2nLyqMiE2E3XM3h6NIItHk36u5IgHPRfh/OJFyIVkAjvqlK\n4+CTqhFS4rq9ob08W4QjrXUTSh83NeYeZarNDp2XLdIoCm/fOp0kjV4XMkDo\nzIfEjTXax9o76v7lN6loKkGBrgtxAc/A0P0Kajav3yXUwnktTfgzehcGr/qx\noOCJ\r\n=YtTK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a5dbd8a2a.0","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a5dbd8a2a.0_1575417310134_0.5878865111200844","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/slider","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a818ded95eb35e44492d4ba54bf16a12a3a42b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ba879b68b.0.tgz","fileCount":31,"integrity":"sha512-zzOKmUUyZTD9LI/HmjsG+OBR2OI1M8/xEIMVm8I0shTc4Sutcj/Y/wsJBEfYDgCD0h+W4mH+7+NGugaFgBiI4w==","signatures":[{"sig":"MEYCIQCouCKiwufxlmIkKwgN1DoS83rFQ924rrYErfKUfVDdhgIhANp/8dYOv8BznkgoRK6CucvmPo9WJkRM7xJ5+IdUlpMj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWaCRA9TVsSAnZWagAAgNQP/iHSyilWzt9gb67AKeh7\n4DOciC0ufmU4dOXtbj2wiXJ5Igr8tDYORIGV7oYn/nbRwB+c9SYifibTSlDH\neBLa6LWJUZcebXzl1b/l4dGLh2LXFQX4/iHnowgdRL7dyzfb+dBqKwop/DEW\nnq9l2XMd5ZoQgfW1Ggy5esBbE93G5IplStD84WP7SCPegw2B13pF8r4hpYeC\n1rko4i+l0DSsY2b28KpkV4sQMrRIeNpjKaHgrQybNopf9j+qtkv+irDxOnki\nNYuoOATWMP5GoPW9oIotg8hVAX/eC3vdjuBN76XEBRQbcilNzz3NonpmYyVK\noPUk7UDFgqODEHkSSj9459FrYwfOF8DpwYMdRoiWrrRK+XuXz8acdoDp7/fA\n6la1E1NmGcvy+6wj3zV9I5ZFJulg8GuPKsWTq/C+ZpdWJEG/ED5ojJL3p/5T\novqs5kI+PYePVWoOnHWI//S779vzAphelUmZu8RxmonRlwu5ZTVZMv88F5PR\nr6vdHGRTSka6vyTf3X0Ha8KwXn/2GvKQ1/y9ixo3z/jFF4JDE2RDbA8iL44T\nYBEj/CuvnEPTQOx+C3DvhtMr2mSvnOdGU9L0YKpALXjjMEvD+GyYs1vqsY4P\nsX3LPYFNLUuHrn98LWTD4/EOiB7FdMrcVLVPgLVIXeitDMRW4XmcbqxJdfoS\nSBCA\r\n=IGBm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba879b68b.0","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ba879b68b.0_1575490969853_0.686840731780318","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/slider","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9f00892afd7bc66eb2b25a8bc9d5973fd5d87d6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.aa0eba489.0.tgz","fileCount":31,"integrity":"sha512-bIwL4a6twLkiTLDndmnfYr9ISD/XcElXzV/GVc/QdStyr9YLb9iSnyYU1U3UheYyz+EH8gMff7tdyDzF5aZQgA==","signatures":[{"sig":"MEUCIBUmS1Fnkw7Vbcx2DaqUvbMo18rHMCctyQUpjEX7GrGcAiEAobNSparep8KRU9O6zZrN9nKpsiAtMBvMdZH4N4gCHkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXyCRA9TVsSAnZWagAAWEYP+wRIL6UC+eqFnjLWqBmB\nxHhv4FeM8XY+/lOvYEeXKUFG/ZqtS+zYwuJmNPCgUL/jRr4dvHhK+S1OGspQ\n6WKGJeP/6G6k7OnCufp1L4ke8rYcMkgOBcMTMNnTWMMZDaR6Jsh3EJaf6ZSr\nEULjblpW4wiWvywZrFvsjgWMjw3w9hpNgA6/MnWtDvRm+tYxMiw+ygGOKOC1\nhy5jXyxFvve9msAU7iB6XHIDb4auXlqHAw7YIsSdDISAK/nw9g9kL3s6w2Q4\nfWg3kjzjv3+Is03U8OFRwbilLZ/yJ3b3UtZZlnRbY1OF6Q9hHIzt6uwyIIHz\nRy7gABZyTVbPqIiYvI/cXAYwOmaoXhdddp16Q4ZWPEG/PGcsv0DrCIW1zSrz\nqUI20viFKW72kvLbmzdgxSgrCe5l3xutnXqtJY6YAj8mRJlyzhhLGWVSWs/F\nm54NvUZT8JVsunkc3sAPZntI32I70RkIwXcViKB3EHUpOhdEmjlzWOqbkxUt\nttPx6f6XZRA8xBPUjHI/HcwrQKchI2xt5JyaS1r8CFY8EZqzwRIKHl31X7Ia\nkVqPoK8p05rkgblyMV9Kd564NZ81DpG6gxNhTka7ZGOgHX45i08ujTY/lnHt\nuux35jxNnkV1ejG5mulS1FOLjOs9EcKj/dPF7e2TmPSAq470p37PEb1p63xQ\naPQI\r\n=HyTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa0eba489.0","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.aa0eba489.0_1575597554207_0.5876019612724297","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/slider","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00bf8bd803141ce5b0fd11ea92b0e885ffe1b01c","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.cb7b71a86.0.tgz","fileCount":31,"integrity":"sha512-zrVIjgaOSIB0DaNKLbOthBTQnUl75u5l5dB0KOwuTS19lozdVEHs/sYRaMEvFeir1GNPYlR/2xX35UGCSKktHA==","signatures":[{"sig":"MEYCIQCEGoRsx2F8E77ECHlYOfryDY+kdisox5o5kZMJBvjFCQIhAJ0PkmfzCeqoYWBcH1WV4DEyiKvCeoMjWyXwIp3VbOuk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqPCRA9TVsSAnZWagAArW0P/3eeKI6JSmvt2WJLS93Q\nmErSHJjtlfaE+hS9I9A/yNGbBpRzmUkWaZDGTKGqM3WUX4yHSe4ITU/t+6Vm\nDnAtMHAa8vEk7MlPbcW6u6jhmb02Jk7LVOiYT4KtXb/ZOa3ye6xuknxMPuL7\nzgDNvfUYP0GDJIG0kYGTy+ZithRijoCX6ok/9fMvb9gyI46aCei8zhzWuT/Y\nW9uq5fB7ex3w0PRh741mnAXht3KYpozDf1PcWBnjL22kriVKG2nh93kn+wo7\nYWn7QQ+JDWkdk5/nF+T+t7S1/INrLtjeUmS+OPIObs6gl8qRXSXxIW6GOZgK\nRZuVDuqlpzIhXOhA/Xu0J7VBlzVakk/dnlKP6TeTqny0oO1xjFiHr26RMcmb\nuJnG+iQOnnU574eCKJRQ/jMl8dT7H256TlBfmdAoi03txqHy1ZX4WFWrQHs4\nieXWsI5Jlu28t0XIVj6wDqNEiNtfTJaLo1UqbXoZN2V30DsipkID9ndSbdgq\nRbWkENqGhd2XqMU0+Uq4mdIRgZCGUPJTZMCERHp0DW0dosvqzzKOAUYAuAcA\nwO/8+sb39JRMUb4lXODyF3OncoQV6wJf9V1MT32JxqEZT0FWfRAZ2knczAvF\nJ4lPIg67gMQYJT7zSI4IfwIUxOy8tcFOTxi3WnMDqBLCm9P30WTt0R7NzOjw\nGzdv\r\n=hE7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cb7b71a86.0","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.cb7b71a86.0_1575676558917_0.2925705693309939","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/slider","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a497109a40b435592a6dbb84aad87c282c0e9bc","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.50f110a6c.0.tgz","fileCount":31,"integrity":"sha512-z1DL7TDInaEb3CylGGGKncEtjNloCqFgxaH8v2MKul87soqRVIu1QR/zPbjHV7j/QQ3f0Wm0EYKcBd+mQw6A7A==","signatures":[{"sig":"MEQCIBS8npezZraUTRT8lRJ/DQ6Lf2YGGmNga3c8V5a7U/1+AiBuHeLZIdXjBsvS6gKWQJpGMmYaVilXiLItqoULbVgG1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788MCRA9TVsSAnZWagAA23AP/jZVhpkzqmc2v1kYPpHz\nP/MyZio5gL3y0+V74EGfdIOuipikfyPXp1g86+v11wnFj8eMEMK4rx2LRxSW\n6GC2Bjx/0Z2U3VzWSM1w/xW8nA/DU/yItXhwidJ+sz+qF8pi+iHVOZ66+URC\n6ycPKh+0gdYOojdxJGok5gxFX3l1z+PC+5BxxkBgSLFVzS19Y7en3l6KKFDj\nP5bGlxZUaHMIqSyXBalMxrvozgC1TjxwoX7cm9saYYTVfqgMOl1L5XKYv1IS\nLtqaxwtq1NldDiyTXceN/iR3ljvrHrUuHQez9amWyDtCUgI7yh8D90bE8gLR\nKzfk4mNCRis9AamdXVAsl/A567WOhQJ6UUMtnImTW8Mqp/V2/n+P2DcNXI8y\nWTGJYxL9dgcNNIHoUXNbybj7epww3sK5mP/Ag6Z8LkSreUNhVHdwA9Zxd24/\nyTR/HUG7R16CCo86nvVJYBZcKJBT+ot7jvZcj8f60C8v5g+Tr4AFwwqohf0f\n6hr2hftkgqSxFG2YNyE7f4oDw9RQBtgwb5JM6EMSgyEeIWdCYFbJGGlcq2uV\n7Z9EsSoQKCDXJh9sYHedWkiPfK3K02/By02rjKRqrxK7eGbxinnuQLIc5ZuK\ngTLf7tR5JpQJV40cNll8EYRvZQBtNzXN2Ool9dqDBeCFmwkpsOukW5cLF0Ht\nOM9E\r\n=MiLW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.50f110a6c.0","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.50f110a6c.0_1575997195700_0.44656175713437163","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/slider","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef9f4dfecdd17086f9cc0f45701f6cd09bc133a6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.878a08b7c.0.tgz","fileCount":31,"integrity":"sha512-XvhAGD1jRLdi1f1m+qttIv4ASvIPGbOJ+t5ibwhRL7tDY1tUql8h3poczCuQFOijIt9kQ5ZgncNAzj7HS80sKw==","signatures":[{"sig":"MEUCIEkM2W7gQKnQZax7mGitjiLktKmlGL8UogHBnPP+oYnYAiEArBiJd12P0RQc/KEpms+PDYy9uTxZMnQm9Nw4d7kYD8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6cCRA9TVsSAnZWagAAbZsQAIjDEhqZUmgNjAK4XN2K\nly7keyim2PWHtAOmqigfRA66O9h/cQrjYoXV95wmoN+N75tKaSFNK/LI7iYF\n1XUnGcFI3d+fST8IWqd1Jdb8k0Kq6zlmZzO1hG4aOKVJkWkkFxODZBOtgjQ0\nQCeSqnwp9kMU3dZ92aHHePWcaPmS0E3Cmwiob1zK/J4qz10aEQGxDmECVU1/\n33Kl6HenJxOcR5i5mNQGx9UM2gzmQmeatqkWUDku7CYS4G2Qkd9PnRe7yxx4\nGuntEBsZ3wxMsdxEp+TLTVOGlZTmOyEeNDyq+jwvvXpbe4gawtdjKtpaSeWS\nEI0Ny9iM9FqumsIYGnCCw1RVVeJTL/ZYb7yKvYk6m42GutMdd/NZbiUAFkCH\nDgqdcL1K5b3yhh51+U8z4JKsRPPIwpPSYVFCXPtlbdbZ2XqeDQiyD26iwEMZ\nZE1BUuPElg57akV/uHZpsF2Kdff1DfUmDFyubmJh7gZWHpcq6znJRgz5WKLe\nYSQt5+2lpMAju7tUNj/ohW0G4R9tluU57qQzJCJBjlrqoHG7CVQbTSt7jd28\nKh/JyAqbL+4j6oj1dFmXspJgi87DWu4alvN/hB46/IA05psKbd1DsTjkl3pC\nKDPgVV0ajYMzDH0kAHsVAW+cbn592uaKX2O0dRouUlefyYOWidwvhz9ig29/\nPq9z\r\n=MW0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.878a08b7c.0","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.878a08b7c.0_1576095387742_0.19369409723927888","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/slider","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ead75221e36481a9f9ca1341df54e9c2928ac40","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.397905b4e.0.tgz","fileCount":31,"integrity":"sha512-5f19v1QhSLzr02svO1iEPviSrdHzqMoGvN6wEIMHaQbaM5mtXn8C/t2zSAasgXJv7cZtW2KrEEXt2ORPembRHg==","signatures":[{"sig":"MEQCIFV0eR4Iv0cjwK2RkyUy+dXkzyEvHtBQ7PJ6WbuxI3eTAiB8UheJBnMRzKIc/mxUkqcm008MF02oScNlzR0GyZU77w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8ao9CRA9TVsSAnZWagAAw+YP+wUT0PReAxBE+5os4Ou8\nSEmbphdhP5/W7FVKxqYToYj21yyHLXotK/k4E+XYDKzmn2GRS3HDn/S2yrJ1\nty15Uw+eFQR0QD6rHmSrvL3zhiEmgo7o/utRBpWHsrlvONLrPFCnALJljXbI\nHgi8GSegaxO6VFHiMDpvYBwbofpvpHnP2W03i1jSL3uFIN3JmJpkxOOoF2ES\nizfKt3PTPtyHaAYaG+i55q3MHn7SghOTWorSzEIUIWkhisRoEJaQ8caG1ch/\nBl+MwnRH+upJ459mOo68vd5CpJyCGMAc0lsfhyRqcQAAZH2z3fjKlakvbr9l\niPzRXJax///UT2BLmXhS6LyIqngdu0HGkACKxPh7czPW1ISpJVPJ9dFGfgSW\nsnBFIxvAP++bsIU2AfgpYrW+CSU/L0Rksh1PB3bCzP0sx3vz0XbkQfIk+YsQ\nP1ElgvrGXQnLnl8uxv2/VDT4ZWb+fsxaf9gxwzS1jtJLD+fn+J5lYurtEaxB\nS+dhzVH2OjIWRzQqN3AwUFpOJt95XBSHvPTw1LaxHcAHgFRlkU47hZvqPK6M\nLyFeklmEeqG9uCtLCcl1xiNNG+ByJCTqxNKcZP3mcyDtoa3UhPXhu3+gvXNC\nbYv480+/iU3ivQ23VjngG3zcJVw6bgPegP0ZNGLfGQs1zN3aBEfhpm3NqxbR\nNmxp\r\n=lvGB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.397905b4e.0","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.397905b4e.0_1576118844538_0.1566568111509936","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/slider","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"228faa038e25cb6ed89d08e4c2a44d0fff2a4c4f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":31,"integrity":"sha512-QcqG1b7G2butLpTPyGdhhaNTcB2yEvHujzcGr72OtpQR8ftNdlkeYntQSLzEeAfWvMPPkwco2sYWdDRLu8OCNg==","signatures":[{"sig":"MEUCIGsr22sDtfx6EbAKAU3pMy1/Bmuz/b5saOkClqKt2T2AAiEA5vf4+yrPza1yBapVuWFT4SwYMIEBAEPNHpmY4CR4uOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4OCRA9TVsSAnZWagAAuxcP+gIVpxtAPtdWtdSUIz1c\nOmhO+D9UJ6xx/7bEiOuD4rcJSndwhk61CfnWxwSqBUIRsaOId1Vag66ys6vo\nvRqzpsO/Iv0xyWldGXKZWH9oRHxPWRZMIazfc60ptBabc9ufO2/ecbJdQuqC\nEnVhtRpmQ//b0V5xZ3M9YVIOgutdjtcU3NVTGLuoQvIqQywllUMg6Jjp1jnV\nurk8erfrkg9Kk9dZDwEjdga+O69osH9gx8xQ8nzXTrBUpdd047CsK6KMbN0Z\n0+6KiTm1X78ag7uBazdZ42mJKFwL9fP57bFTdhtat7LmEErrpTcNSaIr6Tra\nWLVyJmu589HFS893gfO/inJL9GMxALi7W0bTleqb9IkwKjo2bRTQ3cQsZCRO\nuDwfrzDo5c7BzvV24S1bJQ8gJrx66394773UmYhpLcXt782GL24F4pB27l89\nvzFu/BAsHgRZmBDRc4SJmV6gQ9YShRf9X5UP7VLiSl/66N6hGNzraIS4I89V\nezyrJkTX1rBitmF/96gctUGLXN2HT505e2LlaGrakFIzZd4pIIZwrIed+0Bs\noWJ2J5XK2Ge9VHukCOyocln/HecCaHHPivd2+jW2+3zb3lT1Jd8cBPkODr5N\nvre4oqBshG5Tb+j/LZ64ZP1mQR1HErO41LtjofvT+m1R+JNzbI8E0gqFBxm5\nIPwO\r\n=tG6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1fbf5bd1d.0","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.1fbf5bd1d.0_1576177165875_0.5051027993499204","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/slider","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ccebb3df5c559638338d3913488f181b6c7da23","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b723dfa78.0.tgz","fileCount":31,"integrity":"sha512-5NfIpAL5O9mzaGievo2Pa40VgNlCDMUaVenyKbTJsVQSOI+ZtxCVfrEmC4PzhAY1pED1yWwis90WEwHytRf1Ig==","signatures":[{"sig":"MEUCIG039jUYKDM7rFIpjmDKDfD4HAgKPS10TVXdBpg5a3rfAiEA5CM1xsxYr0W16NLk6ucU5iXBgwVlLV+TrnZqjtN9OwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6lCRA9TVsSAnZWagAAEu0P/iiJr96tHUWt2amhw/3s\n5+EDC0+phwreIXgu0pWlhhzcHrJvrwcMGNG/dQQ6CoIq68mLaK4DtthH7eXj\n4U0sOmYg1UNliXWqKA+h/NwbQZ00oHs09sDcgB6Q2ZDSt7SjUTYM77cstaGr\nbJmbJ6AuyxtCyyb1J9E7R7m1jhf+TiHhw8OGaUn8YdXx/Z8hdHCaaC6hUAWO\nVhh1VoH1WK8eO+Op92mnhQEGi33BGhLi78hqgdfvz/R4mwOLBcQ/wvjQv2xz\ns7g11hWJC8u/Aopcw8I7W5wFllBDpUB7s7av2HjZjSyMjcM5pqYxn9tE4THs\nWOMonkoukBXPHclULbc5Oik4yT1S3geU5z/3fFd0EB7YZZfLVMKlJvcKigRW\n09UNqOqJnZDnp2BVtlr7cojB4UaCR2ErqkQzxeC59dfSU6LyW0m62Z6hzm1v\nHg39885arQqFYHDJ7+rmaZNKs0w1mtJAMVV76MloX1m5QNGRLFJ6dE+3Db+Z\nRviM7xTbcUasKFKNIrTk5iktKs0EfCLBreqEt+Uj//dlwYDofzPRLBm2CmXo\nIpryosjwR9uzp8lNyLHo9cp8BazsH9DsMKadRVb4QRruZii7/CwegE8VyhyG\nKiVD1G7MaWMdOwDbI1a6MmnE3/S3mURDB/bg9V7dkmmC9CTKpo80L6WKlBsl\nnw7E\r\n=HBrl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b723dfa78.0","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b723dfa78.0_1576181412689_0.94763833169041","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/slider","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"384d40ad985f385979daafd56669f8523e6f5c81","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.1c494e567.0.tgz","fileCount":31,"integrity":"sha512-3Hk4WzIaadpOJA7KbiBcU+baLP3TL1/C7kuwkeTptWH/eGbfg8hcjiG0IgGEOxwAfTr0pitzurqNS1wsDZgskQ==","signatures":[{"sig":"MEQCICICuHh/xycXvv16/6/t8uEl1HqjjJJXqz0JNPOJMFquAiAUB+IJ9YupSMDCE64WNoO1ToF4R1ffNd7RwiSc+q3pVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8lCRA9TVsSAnZWagAAVL8P/0teHUTLaDoijeBR39RD\nH//zdg5/bNn8QKNmvWE8OA7ULFH2FNGo3IWk6c861srsMEwCR5M5pnUWoYeY\nBGWilhbIwHITZLlSUVt1ResM6RA70saGgEEZ8vtGg4kouPM/el1TYcl4/OOi\nAZi0ZbRPoHS5eg8zgOjW2qo6G+0esB994dtXL0gpx4ahtJ4JfQeQmrKEL1pf\nSCe6i/D1zCWKTvRBQrBPydVdaEe6yOJGNs00ylGRjkjnSFDbOOs3EQQKJO9H\n/NBLLIjeH9O1MM3DtsQ0N9xgBLjzr03dzTlWYWSGC3rGT3TmuU6WVBBMeEyn\nP8y9VI+O2PcPFDnkNdUZZb8XUia6A0tjQw3rj9cIIDY+RSgJoEps/iTjp9QE\nUyxuDWjlUoUIJuohb1OYRRxtEfg9y9m6nSFXVHKUYBQ/LmH6GTllQwOgxNxE\n+tl9B/iAEH/XA3mJK9gST3Z64uXzL4WCaZJHnLAkeErDhtXxjgDWyU8R/0aF\nlXFb1IKnRexjDjBwcSpytF7dxAOqdVMVzbeOAMmnct4LPKGzChTQ9CVc1ydV\nfpkwDe7hZhiP85mJBm34I9vxwspM4K5oAWXxfJ3p9lKOmkDRCQ2+BobmL9x2\niVWsTy4LeUox+kgyylI9Lwfv9+GJlfFCh2FfiwWOeHWnfytLNW5c93Li8nw+\n++D2\r\n=QvWD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1c494e567.0","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.1c494e567.0_1576193829606_0.15724942158168087","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/slider","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"799ea700665439c2f5c82b1a186f26344eaaf8ad","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c9e98a125.0.tgz","fileCount":31,"integrity":"sha512-EzlmvXsKoOmPRg/0iyqbbEojaNg/9N6KBM2raPSg5bMf9Hm4+A11wsB9/0jV7PzL6TnmmnalxAvFGYA1DdUH0Q==","signatures":[{"sig":"MEUCIF+Xtbfpzut04EhggikwdieCntS2S8+Bv4jLg2xD67VXAiEAuhcso+h4tUdAhlE6ZbWaJoNRuhPwjwAKtMXVyRQhQ5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoACRA9TVsSAnZWagAAMVUQAJLsQ9ijBYzsXxC6jaOC\nsqt5zj59MrVEIZTGeFaBT3g5GD18qaTM7ol+vFQMzszVNcJZzidKIyzFbRLa\n1aqqjcuzZbbVkUHsD+sp5PCrlHhyyK4+Dko7LJXalqGeKCxG2yfdOWzx26S/\ndVb47O2Xqo2hDxjstsWQxydDhxTQOvKDzjKXsAFjmrfK24BtPwVF9Zi700KY\nEJ3f+dGLDsOsudtOPHl+9P7REkb9m3it5XHfWHtSwqUd3plrioqDPAUSWTfa\nbgOGSMOC5Xo6JWALL4ioafVopNpZEp4D8liCBZcY7yajw85+5ztDbVGmrara\nyY/NT6XuRG0/NTwfetkE9oifu/XAkT5YCKZdfFXJ7Jl++XFO/qGkUmloNI3w\nhoywd9xWFKve4QOx9/Uo3EL3qdpYQ7JyOivbdRdwE4SHR/GaOIEQWUhFapCu\noGJ0I4EW47p8kZHOPY6jVWXNswCdPbA10e9FEoQbuujB6jffRPqNjRiePjEQ\nSEkTlhhSVnVK+NiMsKz2agaL5kpDyBDwqk6RdlK8Zw8SyM6Mf+bB/YKTW9st\nP8l7f17gJfnp2dVYQ1owJQsmOKoxYg9H1dDcT2WnjNNcHIkMW+MG+Y9CTzeI\nqPv0XqJzJM/lXetPscLJH16K6cKvkNr/H9eRwyiUtVN3P0e1YsI3l+oJjBao\nFZtG\r\n=baO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c9e98a125.0","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c9e98a125.0_1576606208114_0.4607225143632956","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/slider","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad4d07ce058572002b9bfa4c8252a21f044cb59","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":31,"integrity":"sha512-9miqopBj+IvAMvc6FBYe1wEEd4re100/9PmP0u/mvlphigqDV8PoZCkoSBplWRYu+u3vt0ERTlGSJgdNyi81tg==","signatures":[{"sig":"MEYCIQDzk4/t5f5sH5Kg9yTSv9qAF1xi1VmESip5BEUgFKSGmwIhANsjnR0AT8j1yK/MnyATDwZrk5CH9NMZxNPG/8Z7Zkef","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Ve1CRA9TVsSAnZWagAA0VwP+gKOqzFIscjJWKxAWCj7\n6KmcNTrC7Bt572CA5VLj+HjPHpkTH1o7DBO8jC24CNBClhqhDACn4vATcBNW\nO2Yxr9JWZtHijK2RHQZt6IQaILt0WyGzO7xi7rfsgJFCMXidAb/Byievi9aY\nxm+/I0OTqs64NtHpiaDoK1AYXP1dWpK8LmdVFBD9cwqz1X7yr2iNf/yLb61N\nXGCaynBD3a6UpNsii8WXYPnEGaBPCK2VhHPlygEDokf3uD8pqxrywkIJNA7Q\nE0Eeyl+njFrTydd84lIAaIW673sygTW/7W3+cofrCWqMJBN1iN0ZZOpjbG9t\nYaw/3hbVbdvDzUqZzoPzflvxgWoKl1ykhXuexsHEA0t5aJmgd53rD7nmTfXT\nyV/9T6t2FJWHXrGF32NnE3DlZ/WwjQfJTUj5QdFFt4bOnJxKZ3BgzCPxyU8B\n5UAxEuPODTxiUhbaR6ldVAWaVIuy6iw41dfTgBt5NEdx19xXCAktXS4yOHSP\nTVuOj++S4a8xdE190kD7jBf7x2EbPpc6g2uEcW9RZAoRP2oqT3cGMSszMonn\nUaoPsNvjISbYNxdnzeFXz9V2VuAJumWEcXZuHYOkVwCzW0A7wTbN35dNwxTh\nGJ4aDG7jltwYrOS0NwDyko8MXPWGL384iL8+9sc+K4xpuf/rIYf7ICJoqJge\nPqNo\r\n=7kYm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ffe8f7e3.0","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5ffe8f7e3.0_1576622005146_0.8511392686233199","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/slider","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e6a8152c562a1af6384285b34074789400c1973","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.47949b08e.0.tgz","fileCount":31,"integrity":"sha512-uhDq7gopJP/zWtQcGFF4esv/9fLN+698QEFdja+eu4KkM9AqGTvW/+FkR6vW60SMg7sD6fGb6Dc/OC+mYKqMMw==","signatures":[{"sig":"MEYCIQCL+KI5a3HgdDdgVGlnWFq2DljgKDmqbW7sAlnBV9oQVgIhALoh/7FgTa6TPLzd5DyLF5jN3mA8LLrsKlWQZ2zc6L7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSdCRA9TVsSAnZWagAAG9UP/1u2S4TPtBhYHgjKFs9E\nk/mHNQtPPcI6OPBYWHYnD4TTBdELXfyPBSn5aumlljRzdfbq+ORHfz7IDfDs\nwn4jk5KPKtbmZIsLf2yPCXywpZzvyIShKlTzVU1PXmwLrh4zKo5ErQnmPaIt\njl9bYvyfl21TULSD8rnqajBFGCjSQVPnsrMDu5tjyf9frQisTB5YCbHZqf3d\nz0Cb+SVL6pFc2JUAoqrDD6+J6auH0LH22u0NiB5tsXpHgn8fZrjlJB/9mZ8t\nlDK90HT8vy9BAQQ277mcGSLfdIQz9dXeaQrxE8Uk4pSvUzDw0Ic+8dXId7Ap\nOt0qkYJZh5AgreAEIPz6D+9Wo66tKS1tasJLFgWGlAQIe3HeEUD3I07+RCA7\nYEhRtnN8xVdgMXdwNfM/xKLPQEq5M0QrVpI6B1uUGrBY2dpRtEJH3qH4a9Vr\nP2WceGDfCDNlsEi2H+QB+DAUanASnTpJUK6VoUGVJe84w9THSfpQlF9kkAFp\nNhW0dUyY6So5YrWmU+B4fUyugunahh9odcnAjh0PZ8JGcXN2hVQCn1Xw4DNV\nGqOwhFHDNZIcjaEtrehImr8ksG4lSkN/k1Dw3AH3KFJ4NKu+5DLomx5L936l\neEgyA4YS0oGxOmmE463VujYQjwaRV4CWobaBtpyiop+70TI8xejHi8Es/n0b\nvTR9\r\n=Rd5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.47949b08e.0","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.47949b08e.0_1576690845061_0.9911089333657801","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/slider","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76077775c7915872dc8f4b3dbb9439d2cb048aaf","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b240bcc1b.0.tgz","fileCount":31,"integrity":"sha512-VPv05SUoGV7B6LCpVrrzrGFRbvLFTjDKNIedQG7QIlWfqcwkogYq6h56+YnnKyFZ5Z08nkQHT5PHqCa+PqhMyw==","signatures":[{"sig":"MEUCIQC3WcpZnGrmFQdWUuRsVJVttrRFqmJ+MEX6oNSw3+eXhwIgSv8NeX45Gyc8sN2YutuitTAf0fYPYWU+SeADmZd3CaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsqCRA9TVsSAnZWagAAiR4P/1JACgq6iDqw2Dpyt/hF\nAVRnppnJt3mwRoAE+UrgmTTM/B+3g4LO4mdm0Nu8ac9J2gfhIhLOVxQRelQ5\nBiyE27tQkh9yhcmDdEOf1YZTTM9EYAhqn/7xNzbu3bHvG4oP73q2vjaWu4Fs\naGRKinI3BRFl/pLSIszI2GE5AK/5j9lA8D6Mj7uOxcCUTftd33yGLeTv2zCJ\n34HAq3tyGGQ9Z6RkIY5e7hMRyxsOTjoAjol5vAP7vKGLzg9+/eCH6qtf0Kpf\nuSDrFp1UtxBIu54PCQvwVpAcZ/Jbe7bc9QfCdUL9REpDVVXWIJ/ct5U8Y3MY\nm7CnHKYIaock5m3rBsYdFJZRG9PxyKYk5FfocOpBLl2SCVlvjO6zgiEV3CFn\nQ2Z8km874tosOJP8DGczff9piBxWpq8EnQbYsxSrG7nsoI3nBZbtTfsby58k\nAAIdn3vRWjIa5bCdGicu8Z3ATUdH6ZwMXWGwSQx6VfOboM9ewxM6cju7wMzE\nZcsn3+PhMh++06sBIMUUEZYXi4fVmQghJ9piZgDssXIpjrL7Kqu5Sj/Nq2aN\nVIY1uoxg05o+IcBakOTFTQdrobJj7YU4Z72J/CZGFaDU7u/Yiqaf8Xf5BPVa\nPxziT/YjQTr6ApE9WduIJFpuVkjSr9Uqu+hkLocpXying+khiLHj5Kg/bzfm\nS9CX\r\n=3n53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b240bcc1b.0","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b240bcc1b.0_1576696618550_0.7194023644318082","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/slider","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"803feeb36b5a694904a3faf5f09b172b83b9e4b9","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.391674a26.0.tgz","fileCount":31,"integrity":"sha512-cjUhZSphilcrOOTRImQhlK2hKj79dLGP3/NPLecnCRBCbctWXb+wZ9Y9jHb6PBEUGbzMX2Zvfe680q0JV6daWg==","signatures":[{"sig":"MEQCIETL59Qe1Sqchf1d4BCJORu31pKs4o9kSk8VjbNB/KvBAiAFIE2FAj3sNUAqFfm5Jrv5bsskU1F2njf55HSMwySIQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntGCRA9TVsSAnZWagAAX40P/2Yq4YFFZaf7GCJlOS5I\nrbpS6YO8L7vDy7WYjaYqBtoW8tPRc3wCjH5ggP3AiSjCkGMTBMcBEWu2qoQo\nHUWDbJYb8x8oc6FFbH7JTWyyn8BHXzfU567MjZE4gulzZxHTo4RwOVXsAfuu\n25n85ayQAGHitOI/oWhTVDUu4ih6kt19LCJb6IUjNag7pQPerdh13iQlz08r\n1l5VYVdVHrLX+zZHhcop4Y6hM0CB8z3h1F8QXx2C4sbdjqe3EkqjWqI+cyZ1\nUHx4WC/3zpldEpWsSpqWzAevBSMG0gUYAuPUA0GoQMaIKcklAW/MOPyOELMK\nwdTce6FYM7EO4c6+pPJsGQm85whqjrpIvLfOIlIfYGjKEWZbxRAx/Nhsrcy7\nW2x/z+nReI3Lm3yjuk0k12OrKPeELW4RFQyDmHz5Bjh5B0FQBaRe3l3gpBsO\ngP1OYYG8zRS91GwtdlejEGsk+7r5WgJ6UxJVcmHvvb/t91Ir2393K9JEOLxW\ncgtWvX/80qoNuKeK0ChR/mNUTXtDiFCKMk223kscgoDPPvY+1aNlh5mdPnkZ\n1nuh67ZfHwuPa6M0SPKNTHBBnShcRdh0pT8zTEGRWpASJW6ayBjzrGPE0f7Q\nwQPFSg9Ad2QO2TH+oxz/VO2qwY+BxxAhrWsu+a+FxNajvHqZmJ3mv2GDYBJ3\nHNqU\r\n=t7rG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.391674a26.0","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.391674a26.0_1576696646655_0.7856165710395895","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/slider","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e69a3ba9d117f855a96ba218b6ebd4cd2a29428f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c4837746c.0.tgz","fileCount":31,"integrity":"sha512-VoOhBlNsYUVVmctk9fkUc2DKFZRNg1C2y1wWHgMGFRcOe4zH1OOmssc4bFhxphrtczmFlTqA+L0V4S2Yo7lrUg==","signatures":[{"sig":"MEUCIQDV5DHVOsR2sWDX4/Csjs1xof7vcTedNREAn4aGY0aX7QIgaw4dNwsXbKWHup8M+yyxmzC0aLDRa6+3FI5kHaMhdko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n92CRA9TVsSAnZWagAAQskP/0Bnz8IX3CJh1X30FeS2\n5JqCTmXvfdHWY/xCY/UfdNhfC6WKfWQN/MsEvrnVnbhYkwUu1ZFxxJ6qZNuM\n7+TpAikkL+UABjpqMuE7iTi9HVoV/dUrq7LHXQI4TgChyFj+bmywc793h9Tm\nmbSZctb/pgy1/vBSE2LqB/w4EJ90yONeZP37D90DOd9TJLeBM/GsLSvCteO7\nHwZZMb1ygwWPD5F12vgyAYD/FP7H9NrGLihf2/QDNoIgvXyEYEG3im+d4G44\nsvAXPKDk5HvPCSLk7PqJ+nU0cbI/rvPRZPSY7XzjvCGdFwq3YmJtTDTcKGMt\nqwgz9VmKQnTruVD0fQCXQBYeg9ew4WTmQTA5iYs7H7nRtEZ4L11Xm7nkyJTL\nSBrX0j3ykBk/VeYabfaff4DEC/fyEL0MhWF/eURs4hveaoJDJ2ZqgyYYv4Tf\nhpdTQSPCvOmUyWmM528VQZzUl7LneGNVqVZJApgEFTSGI1ky1/zwf37CPZB1\nyKSdEyZS5MnXzyXLR2fMgSVSehBFRTh0TXwfLCUXWP+lFPdlLAkCZVMjIpG3\nXyJxrKIm4tX2Ga/AkimX+5o6PSpSrQ/jSjA7r10YQ4rwMmJSfSiJMKr8Cf8A\nkVAiATL7YOBbPJFr6qURgNEvKVnuV6WOlkXYxr6/99PIyQ6b/+Q2N7Ul28oQ\nEw20\r\n=YGSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c4837746c.0","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c4837746c.0_1576697718222_0.014422960256483375","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/slider","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"207420f2bf94490befc108b5573c7fdad40e9337","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.e41a70425.0.tgz","fileCount":31,"integrity":"sha512-/2Fk6mr69bkOtqsB3Jf/IfOghyqACAM9C7d8SgsLTr9koTPY5i/+NMTU9eYJV61Pgp71c/xU66oGmVruuPDEgQ==","signatures":[{"sig":"MEQCIAvnlPpxQlQenJNgqjcYZbcuZCmxJ2KtCzrU7KimGf+4AiBvwip8U84NDMRR+IuxBokP7AFt3dpp9b2kncTe/7D3XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQ4CRA9TVsSAnZWagAAtgIP/30nYk+TRWlaE4dLv1b8\nyP6QewQXBeZggvSqWaCRv/meORXu1cQ9xHpfSMH1oAs1bPBCcwDu1WN6WOGa\nU5bZIMRAwe7l+lE3NlwIkrgLpnAECIUiJAyDxqnC7v+hVUhsewMMgLY5WgKR\nQHvDznxFtjjmWPhbEBXLRPBSo9juJ/EwmXT3HGHWNQVp1tTYfvkU806WGePq\nFcUMDacfpsq7rZNX3oo3Z6hmLQ6cNEZmMkNKB6jeXi97AVdDamcJb7yvYPFs\nMTzP3nAl3to1iHssoqfXay3XfdWc5CWZnN5goAzH93VZDA/KeV5bBHwRTG0O\nhA0a/gk8fvzuUOYC7mU9dyRI8RWmnqqGNutuqtf8NzwQSCo6QUrvgdYS6i8x\n83IYvKGrxNurfPbvSQHRyM9a1nK9g+Y9aOrmLWa1nu2LXa526z9z9w2RL/Xu\nW6eLKn+jMMGx6rbXZX7KROSAgjZsoURaSnLZjQERHRkH4QeqAcKWKmNg0uGF\ndOs5T7SCUvYdvCihW17PHNiLmkN3s5+gYfraI+m7SkFhAflgzEGdaWRxyNdd\nbebepMSMY/65sW0uu2CQjEfPdN3JhNXW5cPgiQK8Ej+Ianp3P5EfSjnh0sU5\n+KfcHP3ihWytA/1QwGUSUETn6mBy3JYsh4IXL370DxNNOeOm/nsU6CC4k+Uw\nupa1\r\n=lZ56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e41a70425.0","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.e41a70425.0_1576711223702_0.6974153459152947","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/slider","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"121b3580855a74a1da7decd042bfaef1cc2b896d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.bac43eb43.0.tgz","fileCount":31,"integrity":"sha512-HpAhYqm1Dw2SVPdOQKhrsdCVaYvHpAdGky+2tqQNH9w1wlGuzHoK335Ru1ZsoE2na6EtXgqMGjEe/zh6wXz5+Q==","signatures":[{"sig":"MEUCIQDS2NgIgO9KGgtrPcpN4NpkUOPL30BzGlkeDvAXYWJwHAIgEX36VGfHTSr9LwSJqE9+pbkDbPjd0uwatSlJXLyYB1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUdCRA9TVsSAnZWagAAWiMP/igfrha4G8PUm3pLFOCT\n4jgbURUfUnYvl3Aw+eJbtmGrUkHKIfvr9YJc7J1e9447I64CTcf/nHZP73aF\n2riK4Vdu5RABpFmtCQJt7NOmT1JzY5HhFrEYdUa1EpRQ27nFjnkivTGr8dp1\nKvtjYG/p5g5040u8qucp3CWwcyi12cUxDMr3QFqutxiVPhq3Eysuv69dcReb\ncDhiUGTMBWunmY2Hozi/dOrSDQWHcWcAeHf/48JeelZI649BEkuk7aDboERo\nm+mAYtYjpUGmoCyV6GzwYZwWKuZgwF1dONDd9qpL/z+B2jU9MNaqbx8eM+DQ\nfIWnmLot9x9jgHAnJkQ0+1rf37p6tYp0ipffpWhoQXTQkulKNFHeNUrYgMHp\nowrVx17ymd2yoxJaNrBLq7/OVcYAZjnqrObfQxFfixVn7IimkPkDgz66p/I9\nqxena2RvUFXw9ws6mc7YpZIwuB3ht1QYR8Car+NcBT5DIzgNcVn7Xrc/SJL8\nsUpPQpT4TNZ1A7ljWqLctkiA7RRQQysnozq0nRgJp6iQApJVpmb4xaWjCnk0\nzPj5qMx12cSd57jaZG9F5AQdAjXpbVHgA/D5l5RSYjOx+191MwNOpt3RcaEr\nTO7J0a86Gs1fWcA+PIkSmIVAoT7s52M1LkvF7aQRSjmtRRrkUbn9jK7MlITd\n695P\r\n=kaXc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bac43eb43.0","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.bac43eb43.0_1576711452812_0.404706868167217","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/slider","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faf72f488d48cb2abfa7ddb7a0b76933b1e058fa","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.2e491de55.0.tgz","fileCount":31,"integrity":"sha512-F8kAwYjuSqREEoqDgxbKi7rJsjylB9BbyD6inbv9WkQZsGuRBD7qfQ9cVFrbsblW0RThijZNjijmiCVLHHX0eA==","signatures":[{"sig":"MEUCIAd1H+TyHpkdJqHlbl53fXdRLDVb4zclI7lDtw0/710aAiEA/uBs0fUgdpJiuxB+q0GI4jdmxvTlp5RWXmoWnTYaf/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XSCRA9TVsSAnZWagAA4g4P/RL4LAcMN693ygbJutA+\n83R5sQsnMFz2O7LS7uPULURkj2dekOSyROTX/8QOhkMTvOzpZqyFXCadqbSJ\nnlCyqFT4NcCgsuwhXhKHG18xjqhowjGSKOBD/AfXzDPxCsRjWDkj2shsEnZ1\nCLTLdeFAcYD2qFATzk9KudJ1uXFUW0ifyWaS6dQMCvJ8rL3H4VrzZRYpJLbE\n1YShgAGYM4JyU8fBaop3MuTWmoaF0oLMFlJ1sEYsmlIZdKJRtcW1d19ABnMC\nmt7+7V57F51ndKlRbKg+LBisoLis+dm3hgdWfUOkwP7APUo3yaVByzQJPD7A\neJeyKPtsN/xdf31ZwPf3b7YtN+85KEk8z2b2bJQawBUPyHxFTZb0RuRkOIGA\namvaq44tmvdyh9BltQNURGc6OrmPuXP3QjFtfhpCS/pNNxtDyrPAF2VeNDG0\nsR+rxYwtWNIf2GK1csNq1fhs/AtLYZhnVPBALchh/rfdK2dKeGaD6EtVP5oJ\nb21qdsHqlSpGHoFfcAe77euHAXycGq8AWAXnKhlF2WDohuPH6PmlBDzVoYcv\ncfjvNtF2eQMwkKGEYjPFhxU2AElKIE/FcDPvFFIqMSMt8QE8zRLFdYFzD8q7\npUKy+fB1cOfzumrQ6CS0F6ifTmrVFGQJvsOs8urcS49y5qNJF9ezuO/jqXUL\n1LFF\r\n=MQm3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2e491de55.0","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.2e491de55.0_1576752594311_0.8723128580297703","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/slider","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b323406397167eb34c6f9b660d09ddd22119ca8","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ae101c144.0.tgz","fileCount":31,"integrity":"sha512-Ldc6VJGjoGOK6XNR16/g8y3HvycCmjm2asE/En00Ixf/ggniQWUEjVEz9sp9cRrACyDzEfcoeRFi2+EGQyc2tg==","signatures":[{"sig":"MEUCIGtlPx4IM+Gjp386a6gf54zy7TbdQaVMPdRv0RQjrNgMAiEA0U1x8QSWJnjWYNkTAyPCSAz7zRqCwzikwMRHbiDmGAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RcCRA9TVsSAnZWagAAJj4P+wf7dkmV7juOTjr27GXc\nSJEG2b7VSj3a5HY2K1xt6SH7+ahjJwQbPKiOchWduyLJ/BxjeuINBRZs5mc5\nkaG02bwbDBC4Cx4aZ+XiZxu+dllua3O2tbSgrAbHAi9Kud/wCfflKZ18UErS\n0iIX8ZvACnRUd5W9BT9/AWf0Rpq/q00V0By5uX5y82II3pbMyjoixQ9EqtHh\n/kcbHHYwQcgz5wjUedfLUWPNTxlqxLaORXCkWwVSNd4fUJJc58Z8v3gAM/3H\n+bnTPu5vXjnEN0Ey3qDh5l/wB+jTVVypwgUf3mNzsve5vcKuN6dcoKD1B9AC\nxjFAzroTIDydtctyZKSu3VI/6mxenKc3nMbadUOKQqPoG1q9EFHNgeTiwVQ2\nLn3aWKq4a1UV3NG1fQPiI27WLNNZuaNDjNNi3p/ZpMpt+B7glBnMpAlRmdpm\ncKiEF7YTQAIuCSCKPjcAdjHmVM5fwgyh8/SpyxP/3eidXulsfXiArG9ujCzV\ngdebY7hXslxLB4eABQXfRhs1K4rpRZT24Tt78IHHu6FsmjvWnjCJDkop4R7o\nF1SWvA3X40B7+IfZKAMeU9gP+3JKnuNxggHF09mEEZHKezoM2kjR7kppBNXN\nMEUEuTcrDSr0A5iRjtNg4+HzxXTgXpSytEx5pIrbNcdlyEZNVpDwItS6ugYH\niPv3\r\n=1G0p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ae101c144.0","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ae101c144.0_1576772700312_0.2466977940826558","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/slider","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7feae94f50a63adb8e596587df45889e28e3f149","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a51c31f26.0.tgz","fileCount":31,"integrity":"sha512-rO2LtLZi9Ik5vNLKqF20vLwT1g+NGoG3fEnK956mBvIV3E5abvblNXN7kD38S1BYJOAzncyeAYoRjLJ4eTCQ5Q==","signatures":[{"sig":"MEYCIQDQOVlzB/HpE95xds+ZA23F/4k6uM6dStqn+e+foc1QuAIhALD+max402/airyV0lAyErAXFcJR0q/mTPWTeWacaj16","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/wCRA9TVsSAnZWagAAkjUP/01lNuWDkCgkvCXpomrO\nmkS63B5t+FStJw0L8deWrwlFwDdW8HF7kKqvLATGjsOPgkxM319M8QgzcdOv\nROvEGigvG65Sxn/sxpOxAsP8DEfOClLWEAmBHpcOnKD5WhWHTzbE2U3tOTKm\ndie7OlTHr9erkq0i9Iou3V9MA1SGi28R5GYnWUrjwYmzejr093vsIAq/6Q4S\nVtMtCvtxPhNn8zWgn3bUvNDu1NQNpa7kLOBfO4iSN4I7cpQYFHfiqRsQZkyo\nK4mNbt4e058Qk5OJfwNoKBu4t1HucgbogzZ2EHMrkTuVD/ozJ7gyE4UQUjMn\nyMy4BoPQ7OTeYq2sUDn+hDthThlLgV0C91sh+6TdgXlprHFxhjTTxYZ/vI/s\nhVo0SsRsLCYNYLQcMGx4PsFSrXNdpHUF2VpbWmsRkv1Tu1DqBzxBIc0df3To\n0sk1ru5uF0uiv88Iu/mb6KENK6lg41Q+LEjRd8Grizb0zr3CrdIoFNIe57fd\nzVc05OqAB/ZCuv74XuegAP1Lz3pwFMXuFtAVvqfwffEHVWHlYgqG3gj2TnJq\ntYZxBDAI8QyURBrZmqirI84aumGY725s9dZR/Tbjmr1gY/1fZBTaI5Tp2Vf5\nNrmjrFyK4ifQb4HWPoV0tSD2ZMMAGfbWFhXVnxCWoJko8uhtYS6VEchetL3S\nzw49\r\n=Dsy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a51c31f26.0","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a51c31f26.0_1576775663567_0.15733769512275853","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/slider","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8840631c961424be6fd80c837f5e49e3e24c2801","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.21fc4e13b.0.tgz","fileCount":31,"integrity":"sha512-v//Z3zAUg0Q3JzA954r79HyG9jQgY8gK62+JbtEF+JQlyEEHYTc4N5ruT0zchKWl6XeGkERtzOs3ZLAGoKaBWA==","signatures":[{"sig":"MEUCIQDPqkhPZPxB14hYftfxqz1wNtCCGJAk7homPXFVbo7cAQIgX/WFRrwhvsQpi1FpuATw/ePcXVPpt5ziYWrxbm49ypA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++sxCRA9TVsSAnZWagAAHMwP/3kFbrTazdh9zKXbZoIW\nw1KC6KyDJGjSPbLbInarcgOVEACf6IgOLUAUPtiioDvt8HxxjKuhillCDm6+\n6lZ+aEg/uv7cLS9+b7cLk7yP5HtoVlfDECpohijIW2MLOjbnDwxE7NbbPZPQ\n7dbTcil3gsgU/KyVWBXpVHC8MZjNBWhu8qdw8mV+Tqq1G8rIX3/CFk1w666F\nEIcVpak4+rlwxG7PrRm/SmlaFDCS2r2ZIcd5EXYVb3ecWOzZS7KCtO1/uROv\nhQAKdngNBvSue0gr/Neni0aM1w2btYzryocEa0Ay9JyijzqBim9OA/56iKjF\nBwnsSdGb7ZBsBsn11sLptq7JfBmGWcJYWx2J+KdWheyVgcg9EM7UC9+3IiBQ\nm/PZ301q3V+3tbk87caG2PxYan+jX8jkyQnQyOKO2+eDvuoJadZBhCNui0r5\nh50tjnVvnaKC8OycjpPLzG8f0LHkDfYnO9izBBkZyR69tRjUAn+FxG4kyW/8\nwpyQ48PO7QsWU57j+Sz79WkveflJneiNsBAOsB0eWKr/zbiptfqq8xE0xA26\nztGDaa+p8ghflk7HLxqSpfSifBOfV7p7EQMedfCInOXvXfZjCuGirQkNhXfy\niOySlyA2pHqAd/TL5hQezwkQdz5aj1NerlvoWwV4uYe1bLLObCOcA3XAg2Oa\nUbjr\r\n=eHn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.21fc4e13b.0","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.21fc4e13b.0_1576790833322_0.738653626323849","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/slider","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7f797e86597b6cfdb8d1162cc468d12fbc9ce9e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":31,"integrity":"sha512-4wgDukFrYjLqfjvKnmVJiQKcEJwYdbu4o3u2X/FyNkRRsxPqHg+o3ZBwRdo1SnUrtFI6+EHFiPOZA0A/TsNK1Q==","signatures":[{"sig":"MEUCIG+1SeQaV11MVSSlaIIi0ARZVl9ebSzEZDfYiDnpfOKpAiEAmgFFvkzFWleUHrBfp9MRo/npx0tOzfZDpS7VnFVWVio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iPCRA9TVsSAnZWagAAPB8P/ivvCO7JCTbtIqnoiRD9\nS/4oRI7/3MBtLvggGOJOWI5vkJwI8WSdMoWC1gQV2XpmESbu5J74CyCF3pwG\nc/fybJ5y/Q7LI1hD+poMFI0skyhL/2Em+le6nz4NSkqg9LLiIKcTkH8MLvbD\nLBs95VjNfMxTVSKoOR+CuX2Q8huoaHJvYKbsTHB4gEo1gEKzcrtzWXR83p8N\notojwWpzQPZBmc6OZVUorJcGbrbUXhGWl12adupAPAkbSo29r+teLuML5jHg\nW5FMumgq92c8NtiinXSluahUzB2ugVhxHlP4slBig7REgvOpZDnPzoE3+oAC\n2g2lE25vfBn4PWoVXHNGOSa3MI1WCNe8F1Ms5oFc+UuQviUdhXTtxuJvicZW\ntDisxSxcPl3Wz9ID/7Ykk/1LxctGpBt5uMyvgNuo4H4SxRa7uOvHcQ+7YvP5\n9s2ea2nN2CJmEUfhd4md/kGgHCoTd5OwFf6w9ZiNJl1o5wcU/v4Gb4Hnviys\niyPIpaA+yel+NLq5Ok8DffeV5SOiFvpNKyOx2gWeXHDQZEU5PePDGr1k4wG9\nYaqgapgnzJfJjwqUYSQH/zC564rMbTOMuTvwEciCiSDTmH+2ZhY4pJ/AQeMH\nlPkgAV5zn8LhjImnE/5704rRAd1G4GGzmUNyA0mMiwErD6I/TqpV5QDvxHzs\namzL\r\n=vk+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d2ae6e17d.0","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d2ae6e17d.0_1576794255569_0.21961892246812598","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/slider","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e2026b2ee7fa7101b5d2b7352914d1c4cf63dc","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ba30399ad.0.tgz","fileCount":31,"integrity":"sha512-Vy23dB1ackQ+Z9u/6OUjmnv1xLftZ0ggV/DdPB9L3Xuw1UYJcYEGXSNaNan8iuYRrAzclhje9VCljvSglBOlBg==","signatures":[{"sig":"MEUCIDdVPBbHuL4JhoV3bDM6ByFU6FqIsg4cqOiHIP7HztQVAiEAqk02JAA6ih3cnAgEPx6Nbu+0w1+fmKCnAdAbcns3nRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9cCRA9TVsSAnZWagAAMXAQAKQRW62qich2u7oXOv5h\n7EQ8/Kml960oIa2NAjz8UGgvcvYmHtpWvsQIDedmqez8TuaTcwGywQl1WFBI\n7QPxinYsV+03/FPxwk9UbBBHbKX3LrD4SbdUg8hWdlYd1SD2iwjeZraMhRsp\neMpnZZ4t+1ZUSnCcKrlASoxCHqvj51a3d8S89yhasc+A8xIPnTLzzeVWiVA6\nkezGR9xDPYDK04Gzrx+szGfoW+zU6SbN97J3A6ZtAVlFJYt7crc0cIqI06NR\niU5eDCyjasrUU+b11nV1vSREHtWteoIQGkrDEMlT6A8ceockWvzeRiQDxK7T\nB0laJRCYfaxbDB+iOK82ZURnJkpdw6R8XAncVxDl/BYca/xYyToDgABkxAsu\nl0+V0+wRRi4q9awnkG/d98yezROyWa+BfMYU1w4fXC5IRIA9mvGiIyyY/njE\no5fcRvXZFtxFLvUN7q5nEnMdEFiBi5q3csqkaU3kK8U4hEAc2zWW8nIxAAJO\nyy9TbklxSdE1EWA7xxbESwwBDEO8iowS2ExDTwVkYEYicHTE9nlfNTx3vHA3\ntX2acoqQuoNtGGsnvRuv5r+cMzFprDp3kaGpjCyhP6GuFxz/J8BVArcUk2XV\nxaGgn2nLkLE83woD3ix+fnd0rL8xTOHb1N7tD66LdgeBNc8NeAVL03JrVsap\n7aQf\r\n=qQyX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba30399ad.0","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ba30399ad.0_1576804187749_0.1396331640793418","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/slider","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4229016598507de2aa657b88e4f5e21b155287b2","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a08ccec35.0.tgz","fileCount":31,"integrity":"sha512-btSs9+XHLUbiCGPF0t32w7HB76a+6DD/a8EaCizLBshVDUC2MEtBimfGVxVon96NJ+fQIfuKf3FSyDjgfbypPg==","signatures":[{"sig":"MEUCIQDyEpvKYCWkI8Q/E/FVZt07x9dqizObQdEMuSnjqthM7gIgMCrsENyMLHncgRaoL3YQyN1bBr8I9ciWZIWxMwY9vt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vi+CRA9TVsSAnZWagAADCAQAJEVdfj+RMNhblQR0WGB\nvvrYQd16bdBEM8WeSIz7eL+/lpscLdADHA2WqqDeu1sMrbMPDPZ4fuGEbiZu\nKjTZKEHsDjkKL/83mnnLQhSRruYrneTwe/PeD8E+1a/qc3UIvPvuWldDIJQ4\nk2JPSAAu5S2/s68sQbuqKYjuesMy4wU8QaaCiMxsXkb6nP33kntpY41EWKUA\nEiuiX0NSxOcVXxFtXERtfGJaFnOSHrIYN8/eSIvP9R3sKzS8qZhyZfjORbgS\nloH1F18YhfrtvaSzUTEbyenUIEJVRpVOh/zPhFKJAWtj445k1w/SpoZTIWym\n9TlrRTvpC4sTdNJmLaVzaK/TMQDz0Y+eKCsmdS5MZ/oJnEgBKANmFvsnFTtu\nNGLSoeeWkYhERnN2nIr6C7k0NKD4chDafCf39jYfMPJJY4guUbqLcVLwbacI\nT+thBNS3m7yjemt5pnTLYKzbVqk1ei18t+/cM6f64QzSTdv9yGbKFQmAewoa\nWvJ0Fk1G7Jn5e+vo/yL61PhxyoApn7pO3fLtrCyAyrwS2LmZxkt2aonlLGni\nwBGGj9JgDyWpOgwcU4rSN4AETB4naA7nOZv5btlrBejSMqkEN4ChU8T0pA6K\naNFVt0wvakEFl2RhN67hybv6KXl6FGaU1dK5ZFLKzAr4Qud0Iy+pXvJU3iiq\n3XGS\r\n=zMen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a08ccec35.0","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a08ccec35.0_1576884413584_0.5227570702175552","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/slider","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf8b5f9608505d7f6a0a76fe0c9290490f1d8c7c","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a2f75105e.0.tgz","fileCount":31,"integrity":"sha512-rhH64cRuMncYMlS0ovTOc57l4r66WOsGwhGLK3hG+rAh3jaDYbuMaVQQB0fZ89ynqGh6evZ1fdLha3EQyJCBsg==","signatures":[{"sig":"MEQCIEPq59H7T6KwgFtHW8iTiOVEpiznWaTlX+XZmIAFZZ1jAiB0EEf1vz1C6nQEuTu5wIQN6tN9x2b6d9PTK9VgxqqlbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARniCRA9TVsSAnZWagAAMKQQAKTYgayu39dXoySc/Ct1\nB3ZHB/CQjwVxG6CYLVw+T2jEkxp2nvzXvbN/pJGa0iBsSMOUF5/HsMVopNyd\nwyXIo4yxz9y1kwZv7wxoQLfbThPN9TCP+U0DSON/3k4qQCZQ2VVeD6ucwgdd\npDBEvDaL3lz+UvUXkgQgmZ+AcxHG/SzzLH8f6+Ic9bmbzpd7oVSkSotq1vt8\nIToOIqTDHWFHjphV3nYkrxR0up9108ujlb2N+L1enSXBWLJndGxZsNwQl36A\naatBkeT/xegb63oFge8M3N1q0ff9RqZhRGTQ4qk7r1+16MwX6ssV1U8qWVJy\n6YqfXEnbzDcyz7XuRrsNOah5IMv1S6uuW8vkn70Lj1g8hZ0uPIZM6I7qpq3L\nJtqI7oWIz7LSMSmhGulanWLtRW64cAZ1w6A9IbpliwVZVvyIYB2XkVjI4guk\nJ7BcB1DnjA/GAISOSdnR+lAv7ddJt/pSAnYC6Jebkv+BWp4NXOKIsdW/H/8X\nZ/r8+REhvBk8/l1WWN4deyTJeKldUB/rgvvClUauWP5WajEke7Lc+MIjCWla\n3btlzd4AeUtk5V4gZfK+8jgTOULLi1+9xBpicR3aqHyTeS2+yc5NIdO3E0Zl\nKW4Uesf84aeqcJkoeYMQeI8Hrnm9gE4QMxRcYxsiCfAON0pDj4hx6hOml1As\ntsbz\r\n=Sv+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a2f75105e.0","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a2f75105e.0_1577130466245_0.7928206055002229","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/slider","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d495e09ed313988741b939ca7fd9b774b0c6f911","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c054a24c7.0.tgz","fileCount":31,"integrity":"sha512-AIj2tFE25TfUPMnqX45R8rmoUoCpoczMw5tqEuMbaDw68EW2dSxBxQixxf8H/an6Lu/I1lIMp7vz1tAsHvs77g==","signatures":[{"sig":"MEUCICBK6pqefX5r92IQ3KYehG5Fpr6ucGjTQYBnl6Sfmq6bAiEAg63tfjCcWWEQbCLxNqeOiQ6uFwBZVvZOGiXnaIZohm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaPCRA9TVsSAnZWagAAhSwP/2+tWSMyNxQgqUdOdkdu\nH+zxuZtFITMND2aYs61Q4aQ26mtQewTH8/l5o6J5pj1abivjK/nw3L7AUPR3\nQbQ1dbff0z5GGnbY+WFYBBFDmS4XNPvkwxdrwekTquk5fRwcUdDoiHqBwRmA\nO1/kdbCXG8y5YoOSt2fDQgb1EbnkUVHBFP6qQUPV27Wm3SXTHN0Zy1hwtMJl\n8cTFc32V0SziBLcgih9W+8U3DbIJLSbWM8g6EcgrRHF4MMyFxkkEmFIlu1bC\n0sXvqSdUr87BxQXBJ4Ag7Zhs/X97lsJRSJCOD63oJ9lkn26YkiihblX5dGR+\nLTpjqtj3feH1PIj9SF5LmY9OH0OMk6Ian69cQ+71JV6BdQYpPILpYaAC9luk\nKiSVmpsXslmF6M/fwotfaDl0dAXg9MXjqinbQtbAF1XDr+/3TJFjVozbptFn\nq4cKqkd+Z4BWPGUypfb/m6Kb40wkAggvbO+we5mu+XpmtqEak5brlusU+YqQ\nT9Uq7WJWEzxDjH3UJ9BIY9VV5SOx1aqD+h0Oz54kzVWu8xfjajte6sgB3cKj\n0nIxOKzRaiNgJNXI/W6fH6Pk/dkNhQ/TS4kNdgVg9tij4MefsD9VR1cMAfE4\nDjA3aAHszO1LjtZxu4znDGreWKo9YvBQFriYC4/pei7F+BWY8LwLLXKe3lam\nYojq\r\n=WSQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c054a24c7.0","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c054a24c7.0_1577137807587_0.6820764152190546","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/slider","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b536304e6e84c3a17d9bd8d50a2db30e21e282","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c6808c51c.0.tgz","fileCount":31,"integrity":"sha512-yiiMxCcR0Avlcd3IhyH3s3kEXpPeXKQ7AusJyAZKp+75yfPtpVhXbnnOApVqaPTfDoPN9idV4x4cOemxQWdlEw==","signatures":[{"sig":"MEYCIQCCf6kJtkeo1k8Wrxav1dTcx3orZkoxgTGnRu7XNLQ4GgIhANU1824JBz9gPnnv4wRu2z9X+u6zEihXPYNUF6nqqhdw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATelCRA9TVsSAnZWagAAcQkP/2RQPEbEtKRt+NDj3c27\nP44FtEeP+Ut8GjZDfRP50UtCmaEW0joCASPfzdMQbCD8O74e9R0tNvxXcrnn\nGgAd3YG/8P080PvGxxJMQuK/SVwRpoGzc9GtRRdPDDHGXZK/kvFXNlpIS+fQ\nJ/3FEIC0k9C/M6qAnCEGuIXUN53kEEiZJazpijGc9Lis+Sklo2d0C22ShJqn\nT3HSHAwocw/2GmeUNZdAFOg+E5SE3+QejPvhndogJYFl5b4u6BwyabhiP7nO\naSgYnoB5rvdINEIzcjTwyicn1dXxnG8d90bXd1ozz470HIHt2lO5lHg8fYfb\n+zbnAH6i1Y17q4C8p3pFboXmrQUlIGCV0P/d2VceZI2ugU6dTZoJ5Jxv/JGt\nQrdt0Rm6mf+nQCVlcYy7CEj2cIB16bmZhAb5Xl75VKmOO42OLyZRTaDN6K1M\nv+PbNq9C8g5+TTLAokg/Q9TKAzpKfdsMRh2N2y8vK1YjXvb2nBxFQNOk2gHI\noVZJb3FR9Ocoo5kQ/JBXnwnYn8VfVUprmNxuenWk4/ww01lDN49SlkZv8OhJ\n9cpvCGUGJo2VXV0FILM+VHosbPNYOWtHQ3lrAkgSCHzsTJFyWnMhbIq8+dSO\n6Fgmf+3mrzhomlZOwq2HOLfXL6fHJ+N2UaHgO/tx4Uqj57Bj6t7H7Z81n89f\nal6t\r\n=mC0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c6808c51c.0","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c6808c51c.0_1577138084679_0.9824852419005146","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/slider","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"668683cab5f80edae1ea25e2e8e22c4885a4e76e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7bce9cf77.0.tgz","fileCount":31,"integrity":"sha512-f+sikzZ0SNmJHbmgMRhTcieJ97guUYJqtTlyTr7XlJp+6NLN4qv5K00dY0748Mqp6mqtfZaClSPpxB8lLTRv/w==","signatures":[{"sig":"MEYCIQDhhp06BCz/LEztuCfydb4Jj1dWApGYueYcH/dnmDBPUQIhAPar0Oijl70Xsc1yELC2WGPSBm/CBhtQpTAY2UuHNv8J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/aCRA9TVsSAnZWagAAwh8P/j8yR3217GuFJ1QwAIjN\n+GCLBpvErRPcx17fZngj4LEitD95IpnLsw1zrXySm+/YB0hY+DE0ts7rCqNk\n3jqFP/nkcdvITmK8k3Kdc66cYU78JJPRKlcPu7H+/mpGoMV7fs9IW27IdYWY\nmxcd3Bsej2vsL8YyaWO1jIgOP9GRbVkAtnOSJos6fABzfcugenM8vql6L2KZ\nIC7U2DOJ2RtpiNIsXEIHsHZXQpZYu/A+8HSOL5otmDm2ub2XdofXIswk1gFn\nNTi1cJiF9qrobb6ABQCcbYoH/Dg2+XUEX+CZ67UfXyGqxea3Zu+QkH9hhP7X\nVp0VIaivXyPWtZiamRpQvYDXLIWhnWUKwtaRlV9hV+nmnto9qcQVrBwknfTP\niWhJf7gxVORU3GwAH4PGjrnMYsGA9pnEGYMUifOdW7qkc1s4RV1q6F+M+Su9\nQR4S8s7LghNoXNC4aoeWrlJymV+d4YM99g+G4XbCK/O9KZMsPjZDvUDtlvpM\nHE8ZRlQTcVTKjPiACNsY7MPwWg7usmAM1luIjsdOSSJuxXrSshxniVsbY3dA\nBdCTKntYPRD9jDgLwbQ4c31kkCQkzQnye8ITszRUEG65afDY+cLoToNd5T+I\npaIHiwAg4PwIlH58q+JPvmHbWqj4zESUfqZ26FCmAfQ09tIQqr6XpmjtHpdo\nU1xQ\r\n=QYwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7bce9cf77.0","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7bce9cf77.0_1577385946201_0.03008021847571296","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/slider","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62414f20b847f809b79ea88011dc41c30829b349","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c92f038c3.0.tgz","fileCount":31,"integrity":"sha512-SYxfs4FXDVZlSkQa+vtb/VydPucDvbcJttupo4yf3+RsizibMgKPqZIvpTr910QYkK4kTRD6yNJYn5NHKeqj6g==","signatures":[{"sig":"MEUCIARNZVRpgoJn5ZUCb9w7Y+5lBOOL5Wak9gYF+ZMAC0jIAiEA8NSOZk47PE1BnD6zYp5rA03d+rHmXZQuOn3c9s7WEdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQdCRA9TVsSAnZWagAAvV4QAIS80bCQHa//D8JjEvYe\n/8IAY2OnByxmiot35gvK9zJYzZ+GdsOalJvLeDsDY/evTy24kFIwk+Xl2RRi\n1FEZCtiKXVq23hRXwERVhB1xk2RN/29n+l/mvDN4aYXCnFOSPGUr/QHsGZ90\ni1/ZFKE1Leei6aWA3oA6Xmeq7i8Eo8FFgmm1x9Lw3A37pDDU/GK3jfQ86178\nTsK4FMerGvDYP5ek0+ZN7Jf0obpJatLu7HBCZaAbYbk/MVBiakNkeq67JrLS\nrrhMahOd9bU5HKRTxDVqKFTwP+5p0UkGeYuTtBDXmMHzVG+b99PXevQ8/3KZ\nNz1lRD4OpBTis3cFdRlKu6XLSLMZLlsKMpZiJ/gt+Mc5Trk3W24YyR7Ev56Y\nqN57ZJEL+2r4j5Otp1gwMXVq5C8+z0x0x86S5kFmn8U9akTPQppmTJdvrzbY\nlhVuZsg0Ssf8SiONq+dPlDcoVhS98YXyz8WbHsisV7wBNOfci5A7grDsjnR6\nH8S7ab3i+aMlNghx0gHwWuRB8eDGG2+hU2uOeqcWzMhaVJyTQIJWrwWLp9Ng\n1RjR5Ma5aonY9nYRXL25e2THqRdd2OZ/dKnN3ZPrZFRgUiu4h/89uCAgzNKW\nhtVuwaGGYZ0UQAPvOXdnbSo8o0IP7y1N0F7QR5qYrlJq08YBGV9JlR4fNudo\ngt1l\r\n=/dMe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c92f038c3.0","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c92f038c3.0_1577743388748_0.4072004476458304","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/slider","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914ede2a5868872c6152ec41b5876b9ecd13d92e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.1f1ac7558.0.tgz","fileCount":31,"integrity":"sha512-FFQwukAHYiA5GLF6h6vb79GUSG6woC6bxcKahfLDMOBlr+a7EQneBFJy7wynBWRpijzSKMXnhNu2drUZkS1NRA==","signatures":[{"sig":"MEYCIQDhuTc3x39u228bmLgNrSC73u1LK8YzoCNHGKYnhI5tkAIhAIe3imnXeBTbmjNfAQxy34MIUxUoRevZqCK6FCBl8Pkd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlh2CRA9TVsSAnZWagAAVDEP/3LXssc8HGaXbJtWbO56\nz+yCA/wyWJshL6at34RqlfMjnWk0mXjef0mV5lgYSltJiHHkJOTiGuOTBztP\nDlGh12vue8Aq0eLHeEsh/FBmaHcGWxnvoGAR6X8luin0MWONNDZE2Yfx4BZc\nueAIcuxrIlvQhZ27gYJmUgIoUZoOEM60uze9PBmjBYl+oUXLGxSNuuK5bgha\nn0/JQIfYXtBvNCWWr51Koo8HABtETa5m2Gr98HTCE4mM/cKCEQ7LkMItsFL/\npSFVSfEhEG7oAlZxpMZ/5euGchyDj0J60wFJ0EF1vf8932JB4y6+BsZxcGjN\nPP+Bl92iR210tUyYMH5bytO7PAH30rLJhpQ9AF8E76OfpHSDAL//mIEFoE5K\nRGPKwqO0shitqqPonW6IJtzAhOczel936quV4DBF3RWEteRRJCpSs9BGYRkV\n/fQT/SPj7XT67vqaHLn2eTkgGDhRX+rdDCK3cGYof6QuPx0daHyAP382pI3d\nzyntohAEsWfJlRVPU52iRcn4/8J0aYSbAvDFL31Mmin1RqSjAHyJygxdM2K4\nhazuOz41DQumZwjVsKGRFAsWonn/pLjfrDCG+ERWSI5dDdMmlqinK6CtHi5D\npss6I6Jup/dwKFmn+yL2DN3I8vS/ry2LEGEmzWYbpjUwzx57eD/e5hjv9Q3L\nEXsj\r\n=4HKO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1f1ac7558.0","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.1f1ac7558.0_1577998453700_0.37617860204202924","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/slider","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"084e8833a6ff549b7379ac0377ef541fe96668ae","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ec26e799c.0.tgz","fileCount":31,"integrity":"sha512-K0jqSRZVxsjzJF5wcgNwmKjgwQQLGwAJFpNexSrgm9A60ds3w7rADuOHxIqsqzQTlJuVrslOHQTWDasxl3bjVA==","signatures":[{"sig":"MEUCIQD+aEYVr+qSAwYY2lBQDgO7KB/J+heuHTq4IBcQLAN7bAIgS3NjYhrF+SLSjO/713lnuuZWz9OWSsrAYWZ92tVlGns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPDCRA9TVsSAnZWagAACL4P/jicKbyQScLf/UROjFGY\nn7sN0IRaj0dSSSktAUXLgr6VQgdo2bBYR5IBYxBoPPSLVrphts6hWtTkqElH\njYA/yXm4Q3h4THyxML2Fliv46i+rXluja6PxvIPX9WX083/Z72Q4LVfPMaTK\nQxtFCMdNGEXGzrj8eLyEIeYDKhLMxbF23EdbEUhsoS2QYo+YoOJ3FSY+Vnvy\naxNT+44ZNHncGMYblNyVNw/A1Pd2/yJplQZY9PG6ioUPh/Nd7xP89Xk/hfMc\nrMdHbNo/vV1pAqS169eiyYTiSMlC9FznvnxmBWT8b19VG7qpAspk52puipWF\na7ZkEFAjv4DnE5Ckdg1L2uF/0bwsxo7QVgTrXso3i9FX0PpNyDd8kneaAnh9\nAN5T29Uyj6NwG4ofY9koR1f/6HSchjNVFzfFSJwFUjtwjHcTUdp0RR38kdpu\nhJV3Okssrfh56kY1fqhR3iASaREXn0CIHyb0bxZEBCDPclUuTaO4lOMAO7WH\nDABrVGCM75oIPEUMV7/F+QDuketEXv+3Z777Id2bSWmwsBV5l/fpqFRLS8Lq\nxMijhTbjigv19KCQ7uMT16qxaU2axe0yGDyjLbyKkNu/vP/lEr9Js2yw8mAq\n5g/ZU5Z6oZWg2vYDG4GP5GKrJ4W+5rR8GlqZEqPwxHcGWFehUNz3tln3rCmX\ncydA\r\n=WqKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec26e799c.0","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ec26e799c.0_1578001346655_0.8883831857450497","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/slider","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0aa23fda48c76d9cfcf984ba12dc7cf7b010aa8","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.0a40ced40.0.tgz","fileCount":31,"integrity":"sha512-kLFZ9dhQOPVop19fiCMLjn39pA2xwEeJ76B/RXN3gn1RESnOg9iOOpK5kwZ4lwk2ehN4oBPKsAiGyN7e2a53Mg==","signatures":[{"sig":"MEUCIGAsSWelArbzXiBcCnef3zjiy6yGFppmcT2/2xmppAAtAiEAmUQdmwqX+iuS77khMGZl4yAsmjCP9HS9amghBh6NH6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VPCRA9TVsSAnZWagAAamgP/099mtpIHtYwn7g5GMBA\nxkQSmovyVtqpN+MTY5qa/xjEZOMjqOvoJJD2QvfLIuXvlwHCEF/Yl01xECaR\n+vpo8qFVTL3ZdqtCTHBpqvxEzVvcQk1LntVUIDNPJM+gpMmUgTj2QbGGA/Vk\n5eEvInbIcFZd5V2/Mp6s2OY4GZrspmAsYFEs44eKJ4FMA9F4ank6wMIB9eqI\n4nGQ3t97FGLyhHe34ktqSkm8FeHFxcEgeYUvR/RTUALy9hL8Qk4zfZXNHr1J\nV7Ki027rZw4KDjyc13NirFWvsdkhnA2Lpej1W91gBmHhDlkp4EMe5PuE3vz7\nlVeSlEvISh8J4yg+snkmpzj9jNivuAtqdZsIMVKaUGM4BaR6j7dxODZs0sb8\njk1qDF1+P7709+Uk0wPq6GqStdu8IE5Svni4nNcE2JaUn5vSWx+afHPfwA4j\nXwDqikRUCFTlTQ7lukt0rq4dwYWFUwkmYhEiFf4VZjkjwLbQJ08K+wSGkC/3\nWvPyDoi2imuouIuxPSbIvrUVdoSs4L3L4gDqY0mGOCwW9x9n3yyJZe9usoh+\ncqz9vmDdp1rNKD1YDxLfz4mI8BEPKghZPU7EPsdXXon0FucSjdf0mRjwC3dg\nzHRTHvwr9p3WTzY48iDQoHsvGUQpwbaZep9Zdpytx0P04b6nbxL1luA2Ln8u\nSp0l\r\n=7kZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0a40ced40.0","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.0a40ced40.0_1578071375037_0.24068713009430587","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/slider","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35305cb0972ba5c638b0258ab4eb99a1b6a6dc11","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.3adf84899.0.tgz","fileCount":31,"integrity":"sha512-MR0l1UQYOH1GG+lWttrAuppPH5DY8wVRz+6bTGhvTnF9lDkkDq1q/YfOOOimUP0JWLCsmqNAvleMaWL7mrVTSQ==","signatures":[{"sig":"MEYCIQCy41IDFaTi5hr69LSynwv19NiqJ1bsJ9yAYq5voynG/QIhAIMeFpmI8/F+/L06NxwuhX5z9eTRbE/1/c+IZ/KzGbqr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZnCRA9TVsSAnZWagAAduwP/RsUlwUN9rjwzO1SLSo4\nz//6qij6dpnw57GzMlr87P9BYxuLVaTFB8lYESYZ+9CaHck1FmKaEwnmOOw+\nuWb9USjwal4BNEJB0F+fDxFtGZ6UvpzV1f0D1D+5abGiOY01WUHFB7IS2yBU\nOuJdD2JsQfANdrMK+XzrpUMdBchlbtSRH/NQCi7krHmZRPobzZqgGRKlfUhy\ngRmfHBobwbr+C1OKEQ5FGRNr3ggjhzEcL5wIsc5eyX7fKpQYULd131dC66EJ\n4ko/eBThUrfhN4zyeLgpiq/5PDvcFZOkCzZY4YKmJqLO6x/ekTNddFNa+0ux\nWMU26bysiY4DAlZANc1Sg6r6wYHht/N0WWXbfCPojbnULVqeHR6u+D+utjZM\nOndS9WhF9e7YnY1slalMsuWncKopkOWhfIWZ8mkRJ4nSMUB0UeBItnscRis8\nDkAu9INjuyZUmYdVYHB1yhJwU6sWD4p0Rz+cTQ39JHddM/LYI1CLchSU+/9S\nfi/6nOfb3TwQ0ByZAEwCmhjIHI47U1l8sHMytpOuQp1v1Z5AylzG7hN/PdyN\nFpXEkjKEqXJBFtduMm62Z7CATI/LalboW8rUSlMtev111zvTFHh4O8aYlCan\nqsp1eVfxUgzqIScsaO6uL011LNshMEdLB06woc9ZRebgjh8fHSHIbidI1H+4\nhzkR\r\n=w8xP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3adf84899.0","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.3adf84899.0_1578075751307_0.282295631853009","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/slider","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d69b0de7b96e08500b8a5b0a6cc0e1407c17aa","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.0d42ee650.0.tgz","fileCount":31,"integrity":"sha512-oissgsgaiOQeap4SMMGvmFZWdiFbpaiBf1Ev+utSkOe2Mlt+QzigZzIxrRa8jfmE11yjg16MeAS/QPHcXbyXOA==","signatures":[{"sig":"MEQCIHAaVrEX8nnY2ZKjqlYxWJbqMF4QDmWKA7Fvqsq6ibmOAiAZ46LIBvBS9IPo0VcaHUo8dRKB9TrceWz/OZqsjYUJYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QCCRA9TVsSAnZWagAA5zEP/0EvCHBvOUva61/vlzBT\nwRi69FkuI6UrsSZ7xBNVFUijn7/SOCfNPglizlvesuoHg9iNDr2hgrPHfrLd\nrjSX8QQ1A8OWg4RkldkxaA/I9Z7iL3v33LIkZeh/uqoQqkXo7af3Xn12SjWU\njI12tuAxR5frV4wiVb53UbJIebQbDZwaFCypkHbdL0a+CAJnb4pEb2eG3P19\ndi3VzCCik+P8kZu+gB/hTkzjJDUQ8J2nWtCSS4J7GfLiWDQrTdpEDEaDhSau\nXTwsHx/9faOV/3KwYgdxmLHcFVFBbyvNyjFwTkUKc66ucvduFdhfnZq8/hQY\nZjHnZmJ7UpCqFh0S85GhfoyQEy4OnJEdyzOaBVW2rG720ZcOZwMAEKT698zk\niw9EW5km+8Sm4cZjpamO5i8i7Lxxeb3o0RefQuTua8oGOX/60IGcFBpeU6Ki\nn9+ZPELZRD/U+DhQ/lVLJw/olTD9GEXzTc7NZDCYcl6fzJwaTBG5NPdZpr5C\ncLT3gCPFvdeVn49ZzcaUw/h8jejzafZzMsdizHl4zteMnz/CwvaG2HHmc9mx\nQmpIIKsDRAnq0XpzhCdXxo51KEfpVckVNkql2d9foYwvAzU1s5FHwAtrDBOU\nKGYdC/B0YERBCbE2gXouFTDlfuYDEPWuibEX6eFT5stmq2RZKwQJ2KTto+CX\nkFI1\r\n=pbdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0d42ee650.0","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.0d42ee650.0_1578087425965_0.05591745780992463","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/slider","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eb1537b239e9de67536b275789b9a8bb3e663d3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.847dd1ada.0.tgz","fileCount":31,"integrity":"sha512-NtjT/piLn+6G9n1A8mVFBQ9uBaJ4OAgeDYY2UXtqL1SRa1wfcpRVamXNiKs415np0MUHQh8rURgsChgxYyePOg==","signatures":[{"sig":"MEYCIQCaYLEWFYMepWGKWIkxgw58VKVT2qyNx5qWbu7OkoMscAIhAJI5z+K6M+BxLHbuGzIBpunglgZB5wEukY79Zp/Oa+3X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nhCRA9TVsSAnZWagAAE8gP/jRn8YwP3lPpkaqSulu8\ndSPubGQYrtmt9L1TeAk065UwXozzcm1FtzO0jaxcEOC2T53BAvZVC9+Hmr8H\nl6sIoXrvtgH4lm4A3mMRBV8Nx23NcqaVabysQ700j8QD5SBZaQIjAujNm0hB\nK8E4ufXj5ARIdAJmxEB9pqZk8L98HqQsEOE9dsyczJ8JGPqJF97E80zUE16G\nThdSFLnfWW+1c6+g8DTqyKV7tYq9oBpcAiuhYzEq0wFuI06cvq6IrGnk+KNc\nUmEiQG4Q4YMBzs7Nx/dPd+TtUKb/Os1H/8hb4sKM3OHH++eiV1/e5B4lwjx5\nJcN7953Xtm78Y2juA+jP7hgxtdeGcv7rtQ9q7YFTPXtJ96f4/XPD7MCfO+nr\n//zVja9PWpTOzNEWgPEQ9Gfjm2aA1sgNm3CZrbG9N+vt/mFmQQv2A2OSPB97\nJZvYH9/I3cNfswqgNkyF3ZytQn80tKbDss4uX7nb8ab2ziHx5tSK66tZmwwP\nsM6a2Y7foo0xvGDfwY9PubvFjakFUHrwpH13ESZuLJtpYWTroG/01zC4CB5T\nP4xiwWRrWCJsJ12+oZg/ix6pPsrk0Cglh2XnoIvXa85Wm1HxRtcTiFrzZWKo\nj7pQxArPOJc7H6Z4GecKO9VkHPEUqxUCm/vq9uu8mH1ProXYqHFlkkNCoKBc\nbrVI\r\n=yete\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.847dd1ada.0","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.847dd1ada.0_1578338784866_0.9504602362032488","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/slider","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78100350a5fc59742be09fef8915202f18439b0b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.39df7e5df.0.tgz","fileCount":31,"integrity":"sha512-a8d7hSuQtigm2ZnqiWbI2pIMenUf9xWBIpesUlF3/GwWrRHg4O6iTGw1hxRqZOU/T3Zv/nmZCrxJ1v5zWQvPKQ==","signatures":[{"sig":"MEYCIQC/acIIAS3WQZA2C2pCIBeWfyrYdBqygnU3QNEgWmRJRgIhAJ2nPttGCl3kRtxxY0jkxvVEJdb10o/TYBnrI05xNhnA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cHCRA9TVsSAnZWagAAduUP/jRBysYpfdgRuJu64rCh\nrQOxMBzoJd5kuOsDc2hGqfcA2z1Mfb9F7A+RuTZTHsddZe/YJnyi3375LyCi\nXV6yBttrxKdsT03SwrcqP8ygELeCpY4a2lzIHdD78kWh7CvuQwwc8g83MUPh\nWG7CnEvsj4qODhCtuterqiD1BP5622os7xmVjmD3XXZJ7VL1aIbwgqrVvC7N\nyeZZJ82ssLQLTDN59HHcc7YOyxtNjrrJqzUjyJWADMzXWzkhwbj1XFmAgF62\nxGFi9SpFO4JL8Fm3WVa7q0vDSbWYvEOgDgwJUCtt3vG8zoOvl9B0m7jwCNjR\n1V1/8+668TOET34zPbQBH37HH2UkR1qFjpqBCoCTgtZ7GNo94su17J0jXPpT\neGB0cRSl0jHo79luIugZ60YIdce+QjcNb7mlRY+DdZAUCifqFZ+7n+3kwiYo\nFNLS6OBV5wrMLM+ZW1dLgEFg21z+Fa3kBwDEu6tWuU1MxqH2q4SwLcLL9aFI\nnzThn70GQtzCP3lCik/YiCJlxYzuqzulALgof2jKj/9FkSBvMfXvRmPKShbh\nFpzicf2QMlGa20IJpmylpZtwT5vJ0FAWUFkt5rpdgn15BsC8xGMElKa5MHvF\nBB2ZHEKhgD0dvD2NvhFe7SoSL9cF8ewTVKzC+S0vwEKWFNrRPe+zluxKqGsC\nGZlC\r\n=kCu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.39df7e5df.0","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.39df7e5df.0_1578358535291_0.38455091979196343","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/slider","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01dde3a1341d589cc56fd00e678c4b4f7924660b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.f1a2581ab.0.tgz","fileCount":31,"integrity":"sha512-5KaM2QziOUpgsR9j8idDmywi4y3UYRmJA/3Got0lldZYes1SgbgCwjhfO5s+x8tFdQ8ZQNjO0ihhhiXzxbPOwg==","signatures":[{"sig":"MEUCIQD56WJJBIRkZi+uQW9RsACAcHyOjCO2nCL7d/O2+JWiowIgMlMo6wpNqWgI3HpY8DbX/nttFr+Kw6UGlBeXDEwe230=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzhCRA9TVsSAnZWagAAJrcQAIIfnd+wjPn3QLvvY+9D\n0IWZRI9hQISc7faHc7lFC2pobfoTL1clToADZxlCq3XQIPNcGmBtgQfuuTpj\nAcGUHIMFQhDZ2mqtehS45yrFh/3K+jMAObsACDGxvCJW67Toq6A0dUuvcns1\nMc369StPc4ChIyTeXmFhNPhKjlY0I0VR3yQkkbTWgmw+GsL7COb428Q/bpO7\nPaC0Ou+9+WsjjNlTaRY2ZLodUv9K0sllhujY6ji4QmUUQY46L4nfmKOd+zQ/\nuz9l/wGeoNPrxH+lwyIpU8JL0tPyxayituoRwOVqMQn+oEIlpRxRVctK4r7p\nDQ7a3/pjPKGpjsLoY/IbZcmzJ1VfpUWG3WOsVhN5XceI82OO+v7hOkkdpV6C\nNUWSd7hhKnOyQkXarafiARhcDuklCOoF2C134Jaoybg071QxHCYOKxAKfTmw\namlS+Q73anvHW51B8QPOhrRuKtdhFK00XQpFGih7q6pAB2fXFSfOLkqAjpus\nf0sN9HjTKbJpJ3IZgKBPqrIRjj6UwQ150QkK1LxA33WkDzaIyGZD6GXp5Nas\nPYQRfqvaDI7UDhC+og2AXU8wpRR2xF6CkWY5ponzRzQx3bVEr4rOZ8+zKR4w\nxAl7jM2doLVk4qmmnLDjnKqWi7hqVA5Eq1RA7yD+y6ADDWe6ysrCKCVxVSTy\nOS/G\r\n=4xJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f1a2581ab.0","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.f1a2581ab.0_1578409184584_0.1669194359762629","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/slider","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd327625760926a38ae1f82054379306760c8cd0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7c7ddf347.0.tgz","fileCount":31,"integrity":"sha512-u0QWTM+C2fSWG/W/ShdqbFiZ4pokVOTpPBEUL+0kFr88f2HM6WwoH6EIyu6W/fJWVukcVGc/88rzcSqHK2usng==","signatures":[{"sig":"MEYCIQD8RBxhyU4tZocc+j2ZyzJ2m100SW1Xx3uqQ3X6io1spgIhAOfQnNFexWUhLF6gloH79dTXjk1uVFbA2AhfrQzWuJhO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKC9CRA9TVsSAnZWagAAtegP/jpMsQiaMQidzTp7c64C\nwOtVkoE7nU2VYUpekCnL3GZPBOsC1r3xXcfUwipv90Dg1q/bwHPkawXR8sYi\nK5CASUc8s11vKOQBGny+hFgTCl6T4f5y1qR4TYWEZjL7Ow6XfjnntllrUbrv\nxyu1OzX/Ozr+f9aeAvXnHWoJyXxUxNneInrEpaYumbnaQ3VVV3Rsu0EVJaAe\nERVhqifB/D8DwjuHae9EfZcbEeeWnsmAapawzmIMgiKryeN1hDDAfNmXGH77\n+g8S8UbvPIVMxqQnX3W6wvQfl0bH3LXlG457CvZDpUvNMBlDJ3y2FDhPLucw\nliI9z/b7Mt5f/Z5A09IotIsp8QHVTL2g5ABwagoGsEPJSAKYjUjPwTS2FSGo\nFdmFR084ILk8SH7qgT89KG68uHx0PDb4aSTWS7D1g9qAt8EyRXnr1YDh5gb7\nba6VFGODOgv2uzp6CJ5Gsow9eFHLognVq0hgDRsRUcEnG9INqL88RDe997zf\nxwQhx1GM2AJbKpGYwhsmFv+jC9A4f2MotGuaT3FoB+rC4VO4wNjscTc8lxX7\nITS4m68w4l4+bViQ398fT5OsWd4CD7bU8xziZSiLwjljq1L0cfv9JSlKhdya\n1shkAvWL85wBK0iwzkFqgDuhKI+jFvmjM3fjS+EwhR8WP5uXSbsmv5sSor8o\nMDRn\r\n=h7cQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c7ddf347.0","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7c7ddf347.0_1578410173471_0.5204195974412731","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/slider","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e25491055ada3cae695cbfa35fd0d20a9b11697e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":31,"integrity":"sha512-GF2bBg5Dn9zZYTbZFWbh619koCqoFxxJtXtpN4EmQbXb2WHz7GW+D3V4QznScpE3lYESdTpI82+awoV1VttXwA==","signatures":[{"sig":"MEYCIQDTfCaLeeZhIw9jSayXHFu8wgkU1qborm61imKp+GfrjwIhAMKquOOWvpFw8LVEAtM+A05AoPEzQBA4cfDjVujmFFGa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmHCRA9TVsSAnZWagAAdiMQAIXM2kspjWb3a7aARPIe\nyvfAyoKCenvO9onfdYw0YJXwtJEA7d4V0/iDqg9AbLRHZoInlkVNglUcO/GM\nhulfsDn2WwCwqkACHiJ6FeWbRwXarBVNviPcRYqWAH+98343CIh5sOadPuOD\nieu7ejpxHQl2h7SO2sSeQ+QbHouO1cgbr9Uc3tbTxkcm3pxO+3i/btxiK8pG\n1SNIouftUK0bA+jqL6v+tO/5wcz2wg8EYuqksThJ/J0UwDxQXl975Mhnig7h\nI1QHGjHvWGU1yuSUMJBstbfE37142cGitQBBsL2cdrngPaeuGxdZMpPK/lmO\nBJ+3zOz9Tc4+ULK0w7TqJC2N8WqlWcyODdN4DMitbl1Tur9V83Ag36cxVCIw\nkcLMn/VHiwGPlGT3vFWXwhC88euS/XJN5zWrKYkQZ727DzSEy+tYRNkgOz6Y\nzI5SU783LCzUeHhCM64IBmRi4ArBuPExIWyfPSkulJsyBXN9f62n2F8PV0hq\naPiE0ggxrkX6xNEmU2hbC8mAckgshC3n3hVbXXEiy9zJgKhIiMMdD1SrtOCw\nrK8715aKWpC80zPOQjmTuLV3BEjpc/bEQi2s1W0ywN9liRmnmxFTQ+TpIUqC\nC36eDBOImFWBgyh3seEMFx35rFIucMGw4oK153IOzXhY/vYGzuf6O0iMpO3R\nsgwY\r\n=mcuW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1c84d4b5.0","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a1c84d4b5.0_1578420615075_0.6557703849787055","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/slider","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b7b3bd0a0550493c8612ccfc92b52a2bdaad1b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ec9f16578.0.tgz","fileCount":31,"integrity":"sha512-aGqdR3KIW/Ui5RxkUU4U0P0BWTzB86OP2rPi7n0eDHOnFuwZLfh5cNdrllNcbH0XyPSbqAjlKYZUsvTl1LQJgg==","signatures":[{"sig":"MEQCIFrHuJ52OvkWsbn72Gkir5t+7GvJ/OWKAPUuu5JuEi7iAiBZJ/v/B5mIOLODhbRf8quvLDaUEsBO0DKjtTm+migjDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN54CRA9TVsSAnZWagAAnkcQAInMNOqnViIt4XWO9O+v\neEDRKPGpBWv/H/U7+Vrn2Yr39DAgbpwahOb4t0nBJ1d9oJ1m58nVDMhTntN+\n7tZJS0PXVcirjdQPjFAEqzC8b2l9r84I9C0suiBXttCtfu93Qfik7XEHYwYq\ngNz27g5LWc13kMzxUqDh9AoSqHxLXUWygGbbhdTTC3WbMenvvGdboAnD4ffR\nuMpIxbCmaWAxGYfnwYcip75RSstPePUGW8JKjDzXg/XpCVcQiwczl2j+iXsw\nKm+213ff+06bQYtoGyGVxTet4HYGtjmPgGSYWXlx6h4AOiWVcFS5Q/G4CKdM\nhw/JPc/UcNNGBnTguY+mqEjb100G7QHLWaBxvWWX7k1L3JcFmjNq+XZYx2YZ\nUvWKQb2lzRMXfRVAG2gmnfk5aw5jeS/D7pL5jYAqLW3r7Uk7/E1iTzPqLJwK\nOfB24SyiNGb1bpj/jREb0YCe2QVRBV03pleLK2f+slenWdvnmxtmVBplRN23\nyKzKGeS7Ba812vhT4HfVi6c2JVsanOEH+DOh6oeaF9xRjA38S3p55+58y3mf\nQP1RQtOQTNjUukgehDOH6QDMYl6wP4Mw/5fyV5V8uC8mwquf55cg9mgQWkKy\n9nw2l+rzjhNhKcs0gTMKXlmaPKHLmk3OrPf4eACjAxMKMpTtj3tMlcY4c9Vh\nwGEJ\r\n=oP2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec9f16578.0","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ec9f16578.0_1578425976077_0.9241713630798472","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/slider","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"970ae6df304a81de7535ad8343056497c77419bd","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b602226ce.0.tgz","fileCount":31,"integrity":"sha512-2IL+5mEUKQp3x6Ims3NJO/i8pMiF6GAl1MxDESat+HQ9Y0YHfhBZM5P8xu5uiMRGMHoBlCIdbyAztEeKxWFyFQ==","signatures":[{"sig":"MEYCIQDVslusZ0SORIeiuX0ea9sXmbZDKdkh0AhSeSmqZnVzaAIhAMgz/xxB34/BCW0tT5u5ehQ+4ttJUSTgR4Ly670eESlc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObYCRA9TVsSAnZWagAACf0P/iL1tmMDO3hFoXEqkr7I\njywNu4O5WSqYkDg8V79zxaebEeh+v0yRZ46VEHoULy4rRG2yAOV5o3SE6732\n7OomuYJF5zPJrODboK/DRarTaUYRoEnynIQdsyGAtA+Cavv1Q754LPumCmNO\nbpoRVJggplvCxA+bR4yTmYKBwUi1FtwcwhPJequ9YQ0ZXdaSsmakEyubUrMG\nuzkQCC2pHJG4lGNRo5wpl46FgBMIj6hs/16h3qA2vjKmFn1kQ0kkXItVSD3o\nxj4lRT8GbBkyDvfozXXWdZyj3Fb6/hirPc9KHsqhCodhKvapJTzYn5XQ8v2g\nKCObUeb43g0y+ayhrVtOm8O/AKicFrBsiIT8ncZu2R9+thzqXc+Uk++m4Mxz\nSXojCFe2gszdQeS2iySX9yIOiqvZ5re2vJfSoHSJOKiY/LOF2LVhDTr+MKdj\nmm29hNYKdFIOQpm/GzTAgroSOxINcs+TfaU78NB+TVqTY3C6bccwt3+5EanH\nlA14iuclSJGcU5GQBqfTMvtizO3hV5BXnr+yYqkUnH9xniOlAH4Vw5IDh3iX\nGcSMpKug4IRHPFV9F59tKysKPfQcXjbeN1keNsg7GPjK6xPpIhhSzJV5tVuM\nzXm5f6qtaC50c4iAJy+XBx32tXXWL+XRpQeSEUo+w8gKvSXfc6+DBtNZJjvm\n7b5I\r\n=p+WN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b602226ce.0","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b602226ce.0_1578428120249_0.20418814864360257","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/slider","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ac0a5a72eca3c89c18454a1da0c003ebabe5e3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":31,"integrity":"sha512-ieH8ZCZ4fywESLSVxBj8duQqK/ec5Ajdal9v/e6QvRlLAj0uKhQmzv4zYOkHpSSba1G2uN2pwethe2G/wljCcQ==","signatures":[{"sig":"MEQCIDpUBCkNeU6aw8UqXg0ElowHEK2Vs3P+g3rW+f/4Iel3AiBfNsZni2tSohPCyi6E4yaf4kYI4Xha5mZwNXb1oBxboQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdqCRA9TVsSAnZWagAA+5YP/2SljUpA/8ULnubB2s6o\nUu3qtwZ2BCt2g+I0xhFXmgY7a35g2riwWGrzz9K6LKYHZU2B/j5m0LH4jIKw\nfuo+dgQB5dCr9vPZHEWmQY+MDv+MZ/9xTOT5QzBgb41CKHIwuI7IH+nbNraz\nCBUiBLtUiaiPJfl3L/XzSB69jQK1PfVJ2x7tPtEPBCowYRV/OIsPf5xGQnke\nhRw+ThwIduAZKwbB8ITRdjhUnZ5RhGU0Jl2TDe+Og9gVt1kALbNdDLYOSSfO\nDs7Eh1lgJCXWkh7LKW+gqw83OxHcJ9jHuJtqHUSyPPUqE4tH5o0n+9zVojDA\n19KV8Q7yTPPMzCTl9Vm7M3tP725uK2aN7BFBmnczQyeVVbX+u3OYRUlDeLrA\niknTRM0Rsc8/bTuPpeuzNB2s7mhnq3EcwUFA/2JZvY/M9izb6kd1eDCdTY0j\nuPCsjTMJmkS1kC17ueJwA4h6WszqFyVJrcG6y5JTyU5Pp2Erenn0iHWgiKIM\nUF4Unx5UHEw9/9+ZA0I2cYKq4NSqRNvKgc2e7r8jfIDXwKktCTmyBUK/h7+y\nNpk8JR+nwHFtY0pNrXWk3x402mA8VdcPDL5ZnSIymMM3vF29hnWmL0nFCMht\n5d3feqO7A2AG4oQvXf/a37ImsWxnp0zIZvGYUbWeFjnOBvIhUPmIEl6i15uG\niBRx\r\n=jcSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2d2dc08c.0","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b2d2dc08c.0_1578432362135_0.7623470716064633","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/slider","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43b4fde7d8f40b962c2ab5296f082758c5e0cb97","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.61f2d7580.0.tgz","fileCount":31,"integrity":"sha512-WbT4LpZxb0tIhYpp2lJBlVcCAI70XtrGMlgCvAv0oh2AcNpK9rnLKD7gYhbzrHrNxmqLqWgbPnAXHG8z+Pt5SA==","signatures":[{"sig":"MEUCIQD8ntrx4nL8rvPlLaqU9qEaLRekdQF22bNDwW6Jx174oQIgC7bpo6hOU6g4Rpp530Tk6fo4smN1XfrnTkALIQaHXus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqiCRA9TVsSAnZWagAAjm8P/0JSvVY86vAOFdrdfAx+\ndHpZm4swxfKwMh+eKcarSuEoi+8I7WrvdCEdbHZFQjpTkg46UxX2K2z9akh6\nteJqOmSE+bDQs/WcfYMMOq27m80Rjf9kabB1ALW2laehLSdMVAo5OlnKy/hN\njdX2D7zK7MpvNoT5lxGfElYekFWQoAEEjNaTWU9KpizmMsTA7c0oICkgsPVw\nN6qaSh9+x5x0qZtdOi45pC34tdDcFi6XxIlIxXY+obg7HDqmAN7HDxjGcw5n\nUsTZxuBScmzJeKgAOBoTLPMiYWmqkLxSd8FouOAUbirbcRwLuraNssUEH5wE\nyG19tuRc58dzXTEmuCFHx3FyqNl20NXuakdVuc4t0Lsfi9aCPDwN8TTp01Iv\nohQNe/3DONvTJ0jtxAcBg78Ho7m7KaaH299x/XyLKEW3oATPBdjIIUAfgHkx\nvCI34cNlMx8asJ44i4gZZvUdXcyCTtzc6Gzu0A9ARCON47ithIAOqYGPf4Lc\n9OzoqZMi8nmLHTr+MM9O+DBRFBAM/qA93ILBHpYYWvhPCXXXz8c7fsT/SHMG\n0oHmyOyPEqgp5ZFBiQygfyhi1v2F8Lwb9GacJBpwYyGYhfgaNMWtG4/qkcko\nkpOx33MkxDE7BPtNc9lKrUgvqxVi4VjiMgx9sxyQxWPeFMmD0pQdhnzY9jSi\nv/Ja\r\n=J9Mu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.61f2d7580.0","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.61f2d7580.0_1578433185739_0.0056047402335419605","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/slider","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c34f43d089aeedf985b49e33f29d9fa8774917d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d1be53a2e.0.tgz","fileCount":31,"integrity":"sha512-hifnj6X4Gu334hmrji/mkZu8WlubK66/HiHlrf5hCgyhvW0Aanjiyl3OT9WiDhBFQON3Q/D4v7PxHCab2cVZLQ==","signatures":[{"sig":"MEYCIQCS/+nA2iITHv8Xedch/m5qsGBL8f9qKmMQnZx+Pk+XNQIhANQqOKqU4yRlbsfi/G2l8LKeSJXLYKuOKT/CBGUQavaS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNiCRA9TVsSAnZWagAAwpkP/j6qWlKGngAG8sHjh9EI\nwo9aGNoMYQiXll4J12digbNMc5skqazluVonm0iPRJ3zLuwwX3J7BQxA6iyc\ndBKni/qaqWmqBLXAwPgBXrJEwCzXqtkqDF3egHNxOTSvU1x6tDqX8Of9Yufu\npZs3CRpiWvobSOFYNc14gaP19nCGjUnOW6C7vkyopLFZBIZqu0pRL40/XfoV\ngJiCmMZfxpPhXr/3KGLlnUEuId2n4EHqX3qb0ZFmGKw+K9B/2tOzf26sdtYD\nxodOwvWM/xFrlXfIrWqGd4XWoxdv4ZhhojOgGTBBGFDl2IR4BlP41PbBCDDM\n1DEgL97cWpVLxOLM/s1UZOo5LlMokhD74lT8Cv1N/7dsMFsN1lZ4EXi4tcBk\nSKcTDtxFGJA2zxmm0iMuH9tkymlM6t36FbgBfcJY9SRmXLpmbpF2/4HNfzXJ\nJSdPK+NMqB3YPaKTrj2h+lqBE+4+NiNOaItOXzO7Ma64YMmFVRHnJJ6vOGJT\nGp7pMK168YsjzHHDDu8PJNQcN2qRQYDZ4I77+HzAdGlihPCetNpwEJ1ig/4S\nkI3hrLukjP8eg0KvpLOOosZjaaohnVomxp73JbRdE7FdmBmjkjj1UF+FB/LZ\nnqnrRpC098c83ONCoqIUYwjz+YORSLuSQhuo7B+7ZoXI02IOUpKghtsdhm0j\nF8Ec\r\n=MBbF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d1be53a2e.0","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d1be53a2e.0_1578435425753_0.16335969454834176","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/slider","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750b36eefe465eb14a49da19d724d4e317d385c5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.9b0d06e32.0.tgz","fileCount":31,"integrity":"sha512-G70IU45G9BVBbgy7miNu1HMxSmr6xBwAIdmPttIxRsJ78QfI3eDqWb6s0s2D1B30ClNPSFc0Y9tAgU6lsMsRlQ==","signatures":[{"sig":"MEYCIQCmI0aJ51FSAk8vdJWzdQlDjb+K1awDV0m7gLTQA/DTrgIhANVyciQUSGPwr5zLfbNx3BBUApZQiKvH665IF6xVxu8N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPqCRA9TVsSAnZWagAAJwsP/1woaS+J/eh4R/PoxnBo\nfxjUSxJIi+/lwQSFTaQqHav7FvwP0z/Dmui85kCpeVeiVl3mPc1iaALujDHs\n72HqYXUPke5AbQJgkCsdCVj0yvmrwBdAaxAH1iARUBbIFrsEi/quKeQ8IMD+\nVCZaOxCDycxOceycNkRB8r2NksObn+MbDeRT8E//FP5ZvjXQTGQ57E5B/FxR\nMSMRczn+6a5WYBxfNtIqhWGhfJ9Jt3mam6mJFpMZbf03qOSm2YEGI0rvLWEM\n145YGmhiZb0WRubqI5gsSXHLUuTtlninAOwTHYvadvH/p2nGGO0g+YDp6v3u\n+DKvS6uylkPlcGCntpXV82Z6vmXyEDp0Vx/pH/vDRiGkGWx7BWgHT0VuKwxS\nr07a8+pgP3TqJiLjObz6a1GM4H1BptW6f3vroHIQP9MUzLtE0abjUFp/KQva\nreRAvF2cbtf+s2Qc/kcwMr7ADfwUfu2lOFVP7dX4nOnnJK/wGnKMZiDTB0O9\nQyjr9eHsCBZuW8rKXV5LiQ74/oUKGpKyYrVp18epuTWlZGN149dMGN4WAGvE\nUASmEruSlsi0yvygpEHPQLpmkqFRECtJidpz+8H+QmAX97/Plk1G3C9c5OG1\n4JyjqODq85R4PYwVB9r0UBFGMt6F3pbGpb0XeybX24ZXvSXxslddal0oIoad\nr+ck\r\n=iXYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9b0d06e32.0","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.9b0d06e32.0_1578435562078_0.028215572939656264","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/slider","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6a1ba191533489ab89ead56ea8d9563d8128be4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.730c807a0.0.tgz","fileCount":31,"integrity":"sha512-8K6Cax5cQi3L2fMtA+CNM3JA0QdJ904i99A+0JlvWQfydJOIkYgwEzydTp/zf9C2/P+4S2b09AGwYxlM+0KGSg==","signatures":[{"sig":"MEQCIF2zuVmO54GzgcTjXGvNdCbN151P6dc+S8J7Buq9Zy8WAiAHZ5jZ3++YCoMyVkGB/w5usZCgxf9Kn0Ao4joRkzRvcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRKCRA9TVsSAnZWagAA77EP/jO3QkkJfE3I3dIKaC5e\n3cxKGA5kObJFlZWK90ManDElMS63BITw6Wbsq14etS7DCI//x8PhPzHx+f76\nCQU4sKpEwEm2yJSUiFN1+u1dJDBakwcb//fb46fb94hClUTGmVE4iXApIER7\nU5gTOfxIycrWRnAXaWGrNzG9GXaFHQ4wuKNZ2iJoA/5HoivpXayFnF2+15Dm\nvZPDGwCoywynMg4PeXGVPwOSvXmlmwWKI89GyXHuIqBsMjVzbNF5Tu40xfTa\nQ0T1R/OlqdCxTNeQDPnXLivrwAcbeZ3Upww5ZmjymonRa8B0tQLqSCE0835u\nx2Jariz3hjttq7CHl3+qM6Tr8A31lbHZPx+JssKEvo+Y60GhoMKc/lr2tsFC\nOjV/FTs8ruN7p1SsbImXPiiIPl9CmSO6pQYrD1lteE4MgHATaqt2J5Qr3U9z\nLOaVE0BngGcyU6Sh0klSQzlP+13CTHiP5eXhMXUnB/TYB7e51NH7VLrytDXD\nuZaxP8OLjZ+eVXOZcn9FV0E5GXWjnjJoc6lfq87IjrQiUEYyHRgDdVDKmPSc\nttqLbQ+wDZB1uN9nDQmnC0IGl/wpycwZoHjl4Z5xV5YlJ9bvFPnY5VcnOn22\nEzGlyT54qD+V39CaoJLO4mTvynHtT9UBugey1f5Wco+tjEIJMU7YFO59B3Tp\nXf27\r\n=Z88n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.730c807a0.0","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.730c807a0.0_1578435658279_0.14803607121910756","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/slider","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d28c23d07735822c71f3f00a856b4f6419aa675","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.2213152cd.0.tgz","fileCount":31,"integrity":"sha512-X01PmUSUdctlRPjLwVjY5e1g8rC7lJBC8tS2DOoG+EQFI5QdvcmcHP+B5g6KA/jBn+91esA5X4R2Eqt6NgxfNg==","signatures":[{"sig":"MEUCIQCD1nUo7G+cL5tFaCXQ337ZgS1wKggiOcyxyALHKRnrwgIgfCrpHzSWmpfJVZRh7VdE/TF1uJyaVTscFFRWmrYUVFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/JCRA9TVsSAnZWagAAUfkP/14eRfzRmnptwb9WGlLq\nqgiTMunIJXwB7FeOk62x9h5U08pnaTjGqgnd2sBWhIoWVh0rXtExhPpXj6Em\nYKrv/WlQTAVLs2HmOE8ueh9MwPJu4cXLowTkKko65Vqmc+SB7RQ+E30XpPz2\nVMzPKfbh5qdzJZ7qWnQXqWLwBVPb6Y85fhEgzm0Hof+a1TiNISpnt8CG/1r0\nclvqftkq1Z5UiYdEyrD0VeMEGd20VxA35DLxA3m9+sMbAE2eJsM3PadEQyvS\nfX7Fv0Jk188GR6y1Qoj4KlNB2kpBEU9ZLeURAGzg9WnleVV8LY7jRh42iGSv\naxTfMj0rdX4qpERv4Diluap4Z/LtO1eKN+osPMmmJzgj5vudgB/SELXUttpV\nV31x3MIucVnkXLC+BwCgu+alGrhjxWiw4IE0gCOlXO97+j6+pvbfC64lzi4x\nsixtufUTibshdKP+ysZq3zDR80DCWI1kA+TORzaD+owK7495eVErZxKLTIzy\nTcedvwgdYgXLq6xYCZkyQ3B8dObmsw5rDibTrHvHD7bxsSLHeS6m7PxgZwq6\n3Tdx3DwbuzdF5/cdme/ZFh48AObj94EFG/dUlcMJdzlv+RPQOg4oWbadH8T7\naNsuCKXkPCBD93Ja1QLWaFzKEuVDGw5/9b0z/azEnFQwKxLNEvBGNofKB+3E\nGHKM\r\n=0DwW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2213152cd.0","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.2213152cd.0_1578504136973_0.06920490193374595","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/slider","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"075da2c4d59589958ca009f041d0fa412ee6a0b4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5750f7169.0.tgz","fileCount":31,"integrity":"sha512-o6m/0J+9rLBq8JsyCPCNbTkkg604oyJwvXV1rs7/uCVVu5S+H//3H8ZHs5TtGS7LM9fqeykoMsRhiwaqBYGs2w==","signatures":[{"sig":"MEUCIQCYDFsAI1mX98KTADpd69QrO26fnYdrq22hQ+B345gSvgIgPeVPNY1G5viO4FKvCR6atf5tXcGu2CworEL1K4VOUus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfsCRA9TVsSAnZWagAA058P/29rea6SnyAEM2l/hP9L\nqz7WFPOotNAr/AHxsPVhvRNPUs6R2e9aTV9A4jPZcaY9RqbEVwQC9AlvNCyf\nTY7SFmuvxufOkW6L6ZCVWXc/PtYAOOtRvhaZW+5jlMTxrtiGakSxM7mth770\nBKq1FRl8cY0xWgFPuxUiIvcdSZ3dSSc0aFAFcDXBBSLWjPMbBR7E5V+HorPb\n1x6KBEKzsqMXVnVffO3lYUieFOCyNZCHgz3hafr9463355STxw3+ChDOtON8\nzQ6vJ0Gba43dtpUkkRneqqHxnXrLPtT8GtVhxDyFrnDqTwemCVcM9+5ESnRi\n8exicUdaZX3qNop+BMOFZDYMYRr7JnWftgm/aCbXPfMZAvA/XOxHvEpEBHFZ\nvNRdSd/Ewkoxb43RwYX3jmyhYrhxWP06VHs31QKT0eoulRP7BOpnI6uC+oc0\nQl6OcHESKXWx1hWTNsohvZzjLZQvY7f2+H8Zt4oyAbkJccZqMFqY2l50NEqK\nqNsZOQlGTTqxfejH0KzTcpbUHIqiTeReRutCeiYaEMxr9HMVtdfA7x6PXwt1\nVoJPXRs3NoljtykVUsL12PISYSc/HVcJI4nmCJzeijqntws4BTRQa3jGJpgY\nwuqvYz523B5ebYCz0QPsY0EzkRIf7TnkxOG+lFPRRqxv4kc3WDgdZQtCnPr9\nfXyS\r\n=AR1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5750f7169.0","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5750f7169.0_1578506218398_0.5927338194505207","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/slider","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e7e227be00afec2c3a6771ee4028bff24d5dee3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.f7abc7a43.0.tgz","fileCount":31,"integrity":"sha512-mISWyc7zrhvGLe1FTgW/8srroUBiA8WbKHaKafDz5lF4tTRORgF+iS+N3vUHoGKwr9wnuS+re5Ib1O9ATFlRmg==","signatures":[{"sig":"MEYCIQCAFx+dP7xcjqk8FOB/c4+UYwVexK7QM/xE4krNQG28iwIhAJIfWzOPchpg4Qa0u4Aq/Wjf8jdM37+UBGrsfrjE2syq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8mCRA9TVsSAnZWagAA4OIP/3ljr0cPTElrLw6eHrme\nBHQPmBKoADMOeFznAwaKc2NdnuUYGmX0PSvMZtqJsEKyd/oI0mIOulf39e9m\nyfm6s54jzVPf/oQEfH+nTxYH2kKOug74WKmA2F9c97WIdOrobzjg+C+3ThSg\n5AQQZqvQYagcLRLh5UwNBqOf0K942+YHViTWByj5Kbemde4ph3JJaTAlFDeD\n9Gusn0cNYNz+FP+rzIDxTmxfWuVTW5SnlJrMj0u/3O++cP+NqgC4G6G20ffZ\njaOKN9nNLZhxpigcKlJzoC5ksomu3UP//rjvmpFP3zKHP40rCZYoBWX+bQfJ\ntkOArirwDBaeyQO5itQsiWmtWveN3D+pd0M8pgDz+nt7fpRdIOfY4n/oQy2T\nm79kKYIkLbBXkeyDQyYHUt5TqFYdocRyLJPHagWKYRfNx7prJRkIFC/XCasB\nhrAd2U8006Z23qJKTe3q24BXAE9cMkhbEt4jE9G3qN4qtbwEr4emDExgB2YQ\nsYUKk//0/b29GbqdlCO0RjXQDOmCBMVC+MTeTG1G+Ilcz4HNWbzUZsJtTKJH\nNAr/iK6GDvBbKXNowz2/e/2Q/RjuGjhESRrU1/TtRcnJnO9Pvy5o2+kOKNZb\n3nefwYOiZ/tGGSwfSLxzmb2BiE7YztOcGQVw+jTYpBh1ztaN6u63ozcE9xEj\nCxDX\r\n=qHEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f7abc7a43.0","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.f7abc7a43.0_1578508070236_0.19988938832669234","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/slider","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce6a4f077e0c343462e713d8130e5384cafdd744","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.bf7b4a061.0.tgz","fileCount":31,"integrity":"sha512-5X7FD7ZPCNt/M2BXdxoQytJA5pppL5qsoVIr3VvS5xshDQgooPwQpABJGE1XGZgv1WvzPuZDMRNuf5CU+6Bo/g==","signatures":[{"sig":"MEQCIG3cmGv1ehOG89ft9zOxOZp2mQGf2PfnNyQ8PcXSeZYWAiAxyUOVo1Bfn5RmH8gRDDAFlLXiJxh1ZzCHxszuYWSbOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJgCRA9TVsSAnZWagAASAAP/jsiX4miM1dPU0AhnsOD\nA7ryqYYQXS3q+2rGoqWuBAEg+xx11S5AY9NaId6WdvhkrC1mybcVIDBJnIa8\nn/kP3S4+LYPW4wwc3/io7UFNJE2fpv2k9thzPE1OUooakNfX3BDTbUSjoUF8\ndj0zBIIbVh3hNbYwoLVY1gKZ41QpRhcMoIy2b9y9J1XGrE68Kky4twh+eLJ6\nALJGIn8qL5W9Oai77Rap574jMAL8vOme55ebYObPG8+UN5qETxW5FPfqKoJg\nauvJpzG388J27Q0lCFfH4zASqEAjGGSVMoolwNxpXkNcK14go8bvSECmBUEJ\nAfO8swLsfH50o6gLPkhwWRlU3q5dBANuG0gSCYDI9eTpnUpMBhP85u+Z4Vsi\nshfAGvygKLOFeh0/UgCpsC9FT1Il9ibzS0hgiwp27szwRlI19zoZv0hioV5x\noROByS4tu4Rc8Yt1WbV4dBNeqrYVasKoUyTs1pFh+DDLWryeJrWEX2054KrW\nZaAskr/zRWKE5MrZx/AP7FrQsrqmn5Gtw0D5UZgJ/Zl6+04C0pqNtXYXsRwz\nixbwAGcphE8zntrwZcADKW+yjfwvXK/wtguJq34zYlntmbqcajvgQFFrK08/\npdPWHFrg/TWFVuO/MhZBFaGVxK6ZYMkDIHvedxXtatbyed4WzBxecILO+83n\nz292\r\n=GCcJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bf7b4a061.0","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.bf7b4a061.0_1578508896399_0.9885340446942501","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/slider","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3bdf74cfaafa4efb6bdc196b81c1af8f49efb54","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.784fa7903.0.tgz","fileCount":31,"integrity":"sha512-I3/Lu3qk0U/8xOHSys81mZ39d8ZGc9uV+h7UWi0W38ZayvkDDI8lQZLyDyXoW7/B89JKmGzsj6rVAV6cxxt0dw==","signatures":[{"sig":"MEYCIQCBCu26tZLl6ARCDvC+iIQgtjPrbU2Yek3DZsh7MlTbtwIhALsgY9O4ynMlOZx/ueqJM92m8X4/jFHqLa3V6jjxyCvM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikgCRA9TVsSAnZWagAA+nsQAIDh3LtPVlMFhxWxFSLr\nnuqDU+MW1amSVIVoFWRMlAA81Gd9BE7ZJi4ssrocTP1cIeJdOGqOo3nVCPZ0\nwLeDijgkXvsb7MhOTdRWOECRwamPxbARIQ5GrTJt5UdAS8v0zHc043AZsSmJ\nx0PyWF/pp04yA/bP7r2utSQJldej8aSDBFWMFd7dLIfTkbJC2+VUUSyWuPau\nC+fdnLLShfoubBTlXlFPqXRB9q17liB0lM7JbWOLtxPBCpVWzB+Td9zT6/9y\nhb6nqKyDkYm3nRQPDQmUIGwIumC7IqhDgJIg6dFusq+NtmB2uA/VHG50kw9t\nvFuQwCKEXJ5NlihALIXvlBPmI6l97OwJur7RmzV1gSd3XD9524e6jNZO1DCq\njHJ6ydXjjyNgtTr6grgrzCX1GU0QOVvZa3TjyUAWCApb2kOymh9sGAHkrdqQ\n136FDj17Bme0dmygfncQ0X4C42ewhcTmdZArCtDPDYmyUCnUlYSeOO2xk0jW\n/RnSJdzTyYOUyPV8H13zt64bzHf5P6Zj1ixySLQPkGb/h3s34Tyaqxi8Phm3\nlDNDIL1kN2p4wF8xYRFcADrYyvhqOh2Od5lVMQAn1ozXmcd4mczjcbHSHn7E\nJqRb+TuXBYLTMBYlRU5RBxPiLaToIJ5+GFap5Oq4xkCGYvkmbztXly/KMP1T\nHqrz\r\n=Z7bk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.784fa7903.0","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.784fa7903.0_1578510623822_0.8832141708823766","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/slider","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcccc5d51b5cccb19d55298715b549f655c4f48","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.823c050ba.0.tgz","fileCount":31,"integrity":"sha512-aCwZiXlblbIwzYxuWKSaoPqFXUz2AJStsRpPftknEEIpKEe7B07YvW3qyemFaEAa2j/v9OLLZTHvHSjPn8/TXw==","signatures":[{"sig":"MEUCIBN8RtlKcHWR2T547zQZPwJiKQirMOqwNLZ67B/FLUamAiEA9ByXC5SlHZQf4FGl8694STWmPQ3feA17525sPMPjuE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdHCRA9TVsSAnZWagAAKWcP/0+xUlx/btWRJJ4YJaQw\nPXHt6NCHFFrOHEZmrufEwdpd/09YMnWNmiAIYRCdhu9nM0ZLjrFKOFUkFc3L\nm0LlqTlM++GK9Cr3I8O6G1tvVDhowWox+AOYCxr+c9Txr76phwgAWHu8uUbV\nyorQkLz3Ji1rgx8vZe0R2iJPua6v3cut2E3Qrgprjzh5d+5Spt9QZMghqd2g\nKdqUCg4Ixq/GqL6XHCjK+dthJAx4TDeQGqJdCQmO8h4f50mLUAKqObjQOdyE\n7hft8ozjZp72lm42lMxWncPM6vtn8ZSk7xXHE8g6bgHaJGCLQ6QOXhAwvbq/\nAyxEnpRbsCVpsXs/8ByYivjvz5TH7RcnPjGAlHP01dFTk6IaJIvrSWQeryjm\n9lBOigJPH3rwu8UxfpvDTq+hYOYhvANZZZK/875AlLPX7IQYFQyOAH4ZTyYA\nKXMZ8ll3yCahQecCrw4bVJWQKkmLSQPYrq03uJHReFP17i3N1pLXSaiZ+Kkb\n9Tm0Y5l3OERZcx1OrdhwjHKAuIbBBYQgr3qKjLzt3O+kGsnxDpuZWL/NV9Th\nSa+EHG7RvDNQg5zpvE8oP+/gX5V/419UEoovisrNXF4uhmKZY2MOMlzExX4w\n5TRnhUUpQmi5Gz1bQO+WqDaKIbRK8RJfi6ZXMRxZxpO0EyHmd5nZ4rlDoNXW\nZBhG\r\n=Tkyi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.823c050ba.0","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.823c050ba.0_1578514247429_0.007517418025852152","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/slider","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d052a6cfc5269cbb9b24a5df72b7bdc846bdc7ea","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.70c708dee.0.tgz","fileCount":31,"integrity":"sha512-sxNQewyWdkHKNiXtym8DRVXsQ4mBmMRSXwH9lPOuHwUO3BmGFmgBMvBP6HG4PZFaH655n13chLITtbBfWLotbw==","signatures":[{"sig":"MEUCIAfVrWJxZIIPDNHTNFyq0MXuo7baMJbXvFRaRZGlRUYCAiEAx5ElJ/Yt2KbT14OdPG4A8TdwOfDUxthn/X9j88pcy50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjn9CRA9TVsSAnZWagAAL7UP/291liCgdBXQGMi0D0zf\nktl1FlkU7QvjycE5Si8lyPrxUWsDuOCF6wI2MI3/7FcNwwqFlLX7696b3tir\nm/YABOdrcp4+HlkX+Q9PLNueSeOBlDCaa+UoqI93XP51lwmCV3jzTmZ7j2jp\nK2si5axUb8TcXKZFSUpNZ/I0AWWhPlu2IvVECBmMW63j1QiG9FeoaT9EXkRb\nrDu5qS2qpA9UgoGIf3eW5fiVI9PA4ys4we0wyOzG2KPjlRG9dxrF8lQfECCO\n/3c9aKU3ARQQeqz2tXI/m4lrenUyNg3daE8r9RFhTWr7WvDH82DNALd/dsJ1\nnpiZVQo8pF4gx3o5oZ5vcrML+Li8bM8RadA3MAwaNwbAoPKT0z6XLeg+i4Yt\nPrNdQvaGq6ahicC7/aB0hAjvWrSJdg/ufCJV4pJ3JZjn3GmxD1LUDCscyDeN\nj/XsOxVAH2x/ciBabFa5bUC6S8nIqmMPYx6nclPrIT4pqkTA1tT48KA5IW3c\ntlnJF6+vvPyLvge2x73Pl8U+hho5grjc0zXFK60OLfR8QxlJAA50a50o7ShG\nz74O6wlu9ZMjiF9+GUhF0Gxf3aC1HxpBsaxipO2rv3rD+y1HWMIv/UyeOpDM\nnRJJXYpZnnr3ZfwETJpiSz/D4FODuad4MLL5RS6oM9i1gXm0f6DdogeGc39A\nH92/\r\n=1SYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.70c708dee.0","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.70c708dee.0_1578514941119_0.44561657531152554","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/slider","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470e39e2f8a7dae62b890f17ef6311a508315a25","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":31,"integrity":"sha512-1zmm5bsIblokt7RBCVna38L/WYoHFSdqVFBLYya69ERnUW0cV5u595gqfrf4xtMHxeHxy6KQ8oWq3AL/zxK2Hg==","signatures":[{"sig":"MEUCIHAmo84PbjD3+DrrBQSD78MTklg0KpzKrI41S3IirNy2AiEA2FywEnMLYRbo/GPT37BLvbEz7IyeNXjsCXMYxuhRXd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzSCRA9TVsSAnZWagAA8ssQAJxpSWksvYMbHy6E6I7L\nm9z7L4Gv9a34HOPWcZlwXDhkREcA9avqYmEdGqEDe3lXEdftKsAkPtax1u+L\nnPhe2nxaEPba5QZvo+hBgNY7P4ah2I27ne+7eyfnq8bKN6Gsy2YawvZ6dFw1\ncF53Mppw+IselqNwBnQ40DBGtC23HSmDJyABUonuVCWZNhCwUpHsmFuxyLXI\nqlHWiUaMpQW+kipmH1Vz04lD79Okb0hfarxmTf4r2ON2RBlSmE/dFOf5vsf+\n+vVW00HNW1lhyiBFbmXo9JFEfpqv7ZwKM5ulSrHmCfVWhO7Pg2hwuG3vvGdD\nII0wrbwwTNn+b/mnzOI8DxcDyAYfiZqdFhtPFNCTdBAL8wggQy7fCC41NM3u\nJZaZEBQXBTBPAkYtMPsfr7iFd8vJNh6DY3OvYgD4wAF46HWACNAVhdpkm0ia\nphSdHjSnGe7CohOSQua/Z3FZcuWW9nF7q4UKduz88DdrUQOwJcpLlplzlhOz\nrNiFdy8U1t/GOSqDazEEUeSy9XN2zRNA7cRUH2Q2W8zBNQ+Sqxy/5eJCjHWv\nu1URy49wg9N//d9oYYFf+DKho7tCvqFzrjkfsDjezn3IrhhHidrjBbLZ8+b4\nhu7MOPXP2QsW3ovHXAfgg76BuVkdrTsbKQqizpye0KFdJMQ/oHV6HzOnIneV\n+hcT\r\n=H32L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ed9d13d0.0","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5ed9d13d0.0_1578519762018_0.3034343870935021","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/slider","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ef78c3090261a548364e4b91ad440ed3fafb708","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.4819cc7e5.0.tgz","fileCount":31,"integrity":"sha512-XvFrGtq0aeUAGrrPsKCSXT9u+mj48gl3TwV0TLPP56N9+6ZGpMiNim1Yz9OT0iafBK/MYxibLfy4hIAcITU1+g==","signatures":[{"sig":"MEUCIQCq2QNKNycZOf4nxckZxznQHRkdHkDOouksQD2GA9MqCwIgW7YaScqC9a8qD3S+3/ByZ5AR/q8RwbEKCgBRcIX8940=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlB2CRA9TVsSAnZWagAAVuAP/1JvQyyODOVTwXCki9LR\nNF2mtFYxbGoto1j1zJh7GvouDsrejEKBoqnMW5r/lmNCEVOzkG6SnT8rxd1j\na2fGKVnAF7Q1W9WAjjC7/gSpGclddODGdFqb3rjxgO1SIsnq+9N3jqwoDsKZ\ndgMOT5ORntIeBsI+nDopcT8MW/jdTG1Qc2d9i6FZvViGpTVdjl+yk7KRQUJk\nf3Qqj/qvAWlRfME8pSFr6hmDsaqINGwD1sDchfJtLbTEva8jrkDemADu/OUo\n40doieyfSfw+aFrEkBrr/2H6leShDidtkpzRjNUi3r63x3+4PldTn3tBQZls\nUq4c6Xn9S/IKt25ko+F84D/wM54cMAsob8HBI14G7NThSiWlzlEp5RaKGo0m\nEaOMKZYjSBNKCknSJ4QomFa6ROQyMh5aEn/lcft2l6zZtkW6/IGd9wl9Yeio\n4lMF5hXyE5qkICWC74rtFif/ZfCwX28bNzyG0EQTL8wJDuXvqGI7dx/s9UFJ\nU3h6vnD1TsDSa17S/3MpJeiaix59kQtULIxUAm9bXMM6sniFnl83ZLek2zck\n1KZxtujvbg++t/+5LCB8pcegHq5AHM/a2bvQCOC930hha5g1ofKcjhzz9T3q\nk6h6PNz3S6oL7olv4KyFTXJeuOO5EPICsywKZrgbPqWU7nK0jcj3H1fcdK6e\nyV4U\r\n=hG+a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4819cc7e5.0","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.4819cc7e5.0_1578520694540_0.7906550541680757","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/slider","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8b62e17a727fc4572b398e8d138c5c3dbe109a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":31,"integrity":"sha512-rIBCilSawnOMxscYykjUJB2A/YAcRHHXeMc9dqV8A0abbDNuDq03MbPeY0TvTumH0qPMIp20LkQfKFGHfkLidA==","signatures":[{"sig":"MEUCIEU9TGoWSuTtGEPtT7mzVS3moAgDU6O1cR5Gkk5PJwG0AiEAupQ4sYo8vPcmUAlhEHCApaefpeXu5UxBF0whzuiY0BI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSxCRA9TVsSAnZWagAAYgMP/1IBa+poRv20nnhsr6Ok\nOO6XK60iKIMCbnXMu+wuk+t/D/eqk3bpHk+NlbA3ZNcerdW6XEWfFaGjYlTf\naW2LfGBZACOAqmO34A/AEP9xMSBbUwzRoK4PaVJldOi801e2sOjZXGQB2OT4\nOtFQ8ck3nBanzRLedcX4Yu7FNO/VbipZBV6/mBpz8cjiwKSSGCebCywomiVF\ngj+WFL+3PvZyEDdq1av5nW5O+TL1txD+q4HQQc8ibpshOFhfgC877odsZ3PU\nDMJdmyWzMM1sP9kANevDHfAU3LodqL/aMh0hv3Vspxv1DdIY3DCW2dltFKN8\nGIjv/23jBbUaewx3HtYu3w1dVr4troaLrFjT3mhSRLH9oXX1XePF7B3U4tUN\nxn765ijuHGsQU1W4kFVASb0zGEAG64TVJFN+IN8LuyHEE3HEcPF8g0CAqzFF\n533Q5wVuTSmZ9HQtOHotjUmbS/FzvjqXypEB4lntSHLDkiIF3ZrD6G4Kl7Jw\nC0mdpsBuXbwBKY/mZrJeDi18DqKyMKkqVFD26xjmbpMaDC8eoOhhTRtwphrz\n0E7t85vknd5HDG+EPBNi7Y9/G1N6ix7ggMXJYnNurWK1aN+ZGzgvGDRcNwb5\n9333ILe1DiX7FEv4KSXVUEa+dLwvToWWIQPwPsRgeyWG+whcv+bCZQu4nv+z\nzsUX\r\n=Htz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe3ffd2c3.0","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.fe3ffd2c3.0_1578521777328_0.07434303642318407","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/slider","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"934460afb8182f490bd697460380734bc42a3cb8","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c0e850090.0.tgz","fileCount":31,"integrity":"sha512-e0BfQVALn8D0uEUzXHwhe/5T9VzZJcRwset8m1N3mAlusFNkG1xsV3UPzn56zsWxcS2L7ey5LrbkYSJNSQhhLA==","signatures":[{"sig":"MEUCIQDnLsiysIdRc6qUKe7fA4iB+asAaFLBkEEQqNvDR0GNAgIgUh5fU1g1a+P70fpZ1Mt0Hg3Xjmsi/b1iXxLVlTQyPFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZUCRA9TVsSAnZWagAAthkP/iekQpKwTMn1Bwd5yeoC\n+jS8iY6r8a03S5z8Ut0AmfX3XfvMgXmnL/SRAEj0HFEawfL6BSmpJ9PgjpQt\npZncJey+j27IF+wGPtojsZBcigrcVqZX2VC+17u8WZvkAmbDqc9k6G4y/K86\n9wMIPN3XAlgPyOIPMHAme87cWdnCUhsuQrxm7A21mzIy6wxq1uLNneNPvKGk\nWbo9/s6QHQ3x7IOKhnni+e+iN7liwVgmK7iW6IqS90UuOAuKBHoeNAqGEYUR\n9RgeeIo+I3kKf7ZlgpVz4SB305lY8JnyjkUCHNDvqlVQzKWnzi35zrmLB1Hd\n8RIbGoxBuSIqFnYo7J3zhRIw28+n2FlHGBEsKaqGLSvaFTTgbYQaJ5hy7W2U\nP/f4ywJhC/AgZ8DUwD8p6dRPo1hqs2QClvbFAgNc3y931X6vy/6JwGFcOhwF\nTdZb10KTMC/klJHJGQahSUdf4bP5TOg7HiHXuPK8W++OhaXV26e3qZ3IYfW3\njTOkczByqUZC8K4stAtSlG3vGrQaIgQPmRBqVVH4IJZzfHV7gsoJJHW21ZjU\nUymNLZChLqlwjJw5h1DhbxtetypOMBEl/5WsIa1MDGQRBiMcnz2Y+C0u7T42\nFREXWDBXtiW0zKT+NZkyuLRLEo6DVJGwjDwkTkmzdyEAxWkQ6U2NgkJz2Zrf\n6MMm\r\n=FliX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c0e850090.0","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c0e850090.0_1578522196145_0.6024834768263461","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/slider","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58852a15ca226f9e5b739b9271fe0e1152a1584f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.615f86f38.0.tgz","fileCount":31,"integrity":"sha512-NQ7lyY86ibWlNoaMK/5xVaRmO34M1Z2u9WBk6GNNtNSEM0EG4KTrufg4JthwR3CITIHIX7y/TVG1uO4WRZtciA==","signatures":[{"sig":"MEQCIFccTlaCO6LRsP50pJMfi/HShdx5XfEDC1XxS9vJe07XAiAS33t8fgWpcvHnRyRpxuFI7Uo6sgJ4gFq1Nn05CWw12Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpSCRA9TVsSAnZWagAANoAP/3kGSFuL96ntfDSYBe7f\nxfgsjSqXboUAXZmDdCl8jAv8iKZSKsy7YrdQ7hU5EQUa3X2j2uau5pUV2t8c\niz7WS0ZmpAbBnyIoMUMAM2M3slL11/J62jCnb1mz1jfcwHBQgz4bkCeOPvju\ntTeKPcnBS4dGF4oBCit1nSXtdioSowLz2MiobixstTZcazUTzCq9sRn4dJnB\nEFJCGzGp6scg6WIFRvAejaaXlkKOfMCZQcxr2YrXYW2bbtNPRoRlydwcAG9t\nxO6u/4gV35RqBGabyN1nSpDb6zXuEZpMADrvQyxrBXcjybwZy2D5apehpIw8\nJ/Ab9Zmpcr/zlWJPjOZBqGloMJgXpQ138SLcQq4JBmJ+zH+PeGT1Dw/kCxIA\nlMtL8afGDdl/P/B+1GUs2D6HbVfUfES/LXgPcr1M9y4npxDev0GbtE89z911\n000Q5pSkWHZMqV5SvHYkM8+m5LY/RI32IZ7LQ2hFey5r9T3blhNJZm+HPs6y\n5p0zosWU+1QvUJyMRB3/8Q29qTpZnq4Af8QzGovE7mTwwy/EptuQ3lRWHi9S\nPrctpWELd9z2Y0GRmqPjlUIqdrqpkQk7FEemBS8FpLATfkX4QMj3pMJstbzy\nls0BJds4V26x5d3+VVSluXPW3UdD+dCea/jfVx+OmfnzTv0A4ke9U2esbPAa\n8Rij\r\n=5aee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.615f86f38.0","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.615f86f38.0_1578523217943_0.511422822441856","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/slider","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f2ea259f47856be77d8bfc770c83363ec2ae5a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.1eb032637.0.tgz","fileCount":31,"integrity":"sha512-K2hA57XvW/6Pt1xxTovjW+v2el91rmxQBcdv9RE1Ih8V1e7vK2qsfCskNyPirO8YTvQyH7kRYLZyR3hTnhYwyg==","signatures":[{"sig":"MEUCIDWjiMEu/6a5D/ekOcyPR5Nl9tESGOMfAWwWODXxzG7JAiEAhb7M7hUcQpexlmd8rYlqSwfgihhvzBgKiBLuAxSwTQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7yCRA9TVsSAnZWagAA1+QP/jpSeXY6AZYrvtKOrSQs\n+BJL4kogV6622fjUMIAxoUQ3CaS497HMLzOkgEIJfuvYH5MPK+Aka8CjrHi6\njnrYYJdO6z/zWEYHpmZxO7rT2pYn54Cun/ACN/nnV8/+Wo2X0w6oAKqqMSFA\niZiLsAPtNTnOysYKOR0//dxOFlTZf2o8UvRrekenlxGSn86/G+cgFSS7VzUg\nOnomlt8tZvtLxk6ydUpv78dnhv3CI0NDrl7WSLyJHYipVgw2P0DKWiUzSOca\nInOqM/zYRqyrFCTAYZqQiOYiI/qQCZ+Chzv5bwjY9YlT2WrjIIQJb5UGj4gE\nSVF/0httNA3GtQhlQkZm+SIREuxRnhBetVNm8c2rsZTSHEmIZxeHFPzcLrF3\njj9JnNLEiUoxglxPDferHCNMcrck8SbqifcBFNCCdvzrkPvPHPrVxICBgaXO\n+g1biaVCGWpNMzGsELgIrIZGLk6jxuSVnebkfvpqqR4XPdvryU2c64O32NQ6\nLp+3G0hFKqEOAwH4pMYr6OsVT/MihBB6aQ36Znm+cg8hLQYR2CZ+u3mrm76r\nuv01spINRHPfG50Iihp/txFSVBzkLVJM8B8pouT3C0CoLEIMYyz1k56pi8zF\n8GnAduQuFwgKewhOKgu2n0ZT49T2V7RDC8HbJdv3mV9uag0NgRujQvfeU4vR\nupqH\r\n=Q+OJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb032637.0","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.1eb032637.0_1578524402504_0.702871617142321","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/slider","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cfa2eeaf18a621f263bc14b70e1ec9179afb8da","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":31,"integrity":"sha512-1dKPKmVlO8XAGoxHGS5wlh98rNaGJNIH9eboDlshclHIsWo4a9lJswg60DUPai+7xYRwtGjVjAWuqf8vWM7BXg==","signatures":[{"sig":"MEUCIGXb+LWs5i9RW78da7Bu8+isycegoFnwu8PIpAGryvMNAiEAs/hKVI/Puwtg+ukdB/dRRx06mooVRXxYZ7cSdPFHZxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8lCRA9TVsSAnZWagAALuoP/0Niy5fyN7kopygO3CQh\nufQsL+AW8YM+OdV0RJ1SkkO2aVF+ebrtGBXBtbtWczSS5mQBG8JoRBpqTPpX\noF5NgYbUPrD+dSzNUpShzwHGvPVp3cibLIjcRe1MxmVgYiORsvx6ss1kEh8i\nRv9FspWa3uCvV7zyi6O+7ZEjUINRH/fQp/E36Sn64aPvNaJlRXegxSpB0OFt\nSBQ9Fi1uOLSjzDlWD/zaA31PAMjjrNdl2Rm7A9jg4uzGezRhCIVzETHXE/iP\nqvXQGb0s/AtVO5PFijmJLaYMe8UAvz3qcnptf7m13cCHXASBRvGxT/wEOZv+\nKBg1ElikuRMTXb/AG3Wp332x6+uJwX+OqcNyqj9PiZtAOgOZYN9csEpl7JGs\nvCpU+sC+0Xu3oq7jNpl1rQlhL+DqrcaNvh/FAUxt+i+kmP4ScLnmvP0y4Gxh\nsHIz5lRVePg4KrAF6QRJjDtJEpjlzouMTb0HhK0qd5ViI9pwjrD+jtbShV41\nfUG9kGcixlkWH+vvZkTMB2jh70atneH240uMXXVhxgjrXNdz+mrSsVQebLDC\nM8nGg/fUhU5bAVAcI9pYULrs2ZmS4Go575PeV73VU/NBL7UE5sZnF5U+ioM6\ncgnDvweWWtNfgPJjy3coovZIEFteTVCNksfyMO60AkX5oK9gH8pU6Im58dQe\nuPsC\r\n=gHsa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5bc5ebfea.0","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5bc5ebfea.0_1578524452928_0.7818851912277829","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/slider","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf73905a92499b12e04ca296b47ef02b3cbefcba","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.1112b8def.0.tgz","fileCount":31,"integrity":"sha512-p38c38OmGo4W2DLIJREv4buJSdHAr6cEkMpLk3iF/JsSC6H3KxPVmqa60mmZvHSz1nJRIvEgEBXe1iIVwwUoXA==","signatures":[{"sig":"MEUCIQC9+RvB77Ww+lMitDteaxz/mrQYViZhuZMmHuNQ4XXeZgIgCw3U/lRpHkv1jSf8LQobprJ8sKw7tYSdd4SUnKcI5lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TKCRA9TVsSAnZWagAAOVcP/0TH/RKBFoepnpzWz16g\nOdfn/xp99LzDWdKE+CMfHhtalseVhXl09r+331fYi5GrDWNnFzDPB3+/eUlh\nMPbUwP1rtLBU5zyZ79b2dEHIwC7X0lgZh+eOw7r0KoQDgeJ6Pq2AlZ+nmsu+\nMnz1C0tt2e9k6dc/Q6361UptO7AX+JauqyNTlYWRtS/ZFEBJn8lZKChoycrM\n4zyuwgQEt02cDa01bjDICKblQNbqB4SeOW+IoS7sMTlBCjuXSunPTDb6pd8Y\n4IWUpRqY7SwBiijdegkkgyZKWp+DJJBt4nN2OP3pnVs/3IX+qAn5SBJPsKlS\n29zlWDsUimKQsNqmolPfgZoWW+47/lfSWy03ZFR7kHjMU5TdeD8IcQ7Zm+1r\nDJZOng/G54g/PyirY0xl5OzRJgI6ZeMgbY7y6wtpGFvem3i0+EbvO/yqgYgq\nPqdCxb3tY//t5Z2UAHlNfKhnvFwVCU/CPXw2jZfURtAS0XARW5RVkP0UlJu2\n8BTwFpjlgnL1T6AzWKE+i7U1cPdC591kXd0QW4NaJnLN6WmHg9VfNRK9xuQs\njfKsVPn5ei/cMpK0PeOytlzzCfWuB9Ytd49Y2uk8mwIwGUtdh7PKM9cWt6nL\n4iEJRr39YmzAp4XkC1ANxJRiyBQk8NXucRA12N2emZImS9R/IAZtIq28/7gW\nNSdl\r\n=TPHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1112b8def.0","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.1112b8def.0_1578607817948_0.5203852338041097","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/slider","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b00f27401129cf7465e85ed158400ff7acacc0d3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.aab102017.0.tgz","fileCount":31,"integrity":"sha512-ZEeit9LH4capBBr2xCwKp6F23rcLOTWULEzICI9+mzWNnKbPu2tv7zVYSu/FCFxlKyrTBdUfqbEEt6CIImsC0Q==","signatures":[{"sig":"MEUCIQDm++/T0GiHAjD3w0HMok9vvM4fi1zBH6G69YGa+bBJcQIgdoFP0AI8ClvHZw6cKXfseVkwOIIafHonRaCuuGIa8DI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FoCRA9TVsSAnZWagAA/8UP/Ry+i9Yx4tRltu+fyLAu\noe+j0ac03t2GjTD79b+4fVRtubkfDt6mu1yPZW/Hg1D9uNGbgUe+H1/x1Gh2\n9+zdAGNwKxJVcpdtBl9o/TqnzxXljGxRSRX9y5mayjqkts6E8it7xnB3GzvB\n5SNN67Dm2RLYz5x+c5iFKXBtpX0gkGW3Gh/aF30qwUBdhEKOgVAznQRgP5Of\npwmof11vblg4qgsnxA+fKd4wOKJeNOlIoe4tIQ5qvEVKPLAyov5mXu32kK43\nbbnSo+oXpOAN1RFESzpbInBWnPpLpN2ovz/3puHOiuHJsTcyl4tkG73mjCSW\nsfR97ap73PPTjfsqT3OjP1hU8i4uzXJ+wA9/rAk3Lqd3lsJtqSMwEl9pv+6/\nMGQzuw3bcEGrkHTwg/neiONc+VOHUuRakbWiBYIPIb9VwoCNuyWI4p2XgCiW\nWNLbHbH/Spwj1uG6avIWzT66EGXALrJdxE3+eycDL5TUP9gOWupW7C7oFDUG\nupjd+yGqWS82ii1nya2LcfHS1Xpc93suVGa4QLz9YCVuaEFniVt2pZdBL2py\n0SisllGUnzv6wVt5aiYCTPQahu73NTsSFX59ErCiwgs8wCdYJfL0rnuu5DRh\nbAvo2nmfG+5so4jWJj+3iY0dOeugN/ENdt0DcxB3469nUVF44DreDCRSmr/B\nOlID\r\n=5F0R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aab102017.0","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.aab102017.0_1578615143971_0.2005951251081044","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/slider","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c12c91548340db4f2f0780abfb8c302677c980e2","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.426913342.0.tgz","fileCount":31,"integrity":"sha512-DKSKeuPrLhifhLwWl48nxgiZcy5N1isGWxuvh0gZ3T0xolgodXrlqEyZL1Z6/jwrAOpmRGGFGQ6blctS4qJoIA==","signatures":[{"sig":"MEUCIFi0c7z1v66+c17/gCF/yCjaU/YWcXAH10cQJLVWMrNFAiEAw/dhJeoEMyUaQ8ElO0leQkKDts835fMJn/JjnC8mIh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bwCRA9TVsSAnZWagAAfBAP/12YgsTz6NmmKY3xWs4F\nh/mVYzneWicMIOpvuB9jZegWGNyIrPLlT6OBvzqfvkX/EZr0WF/BNlpLrtCG\nzgH+gW74j+fTVT/CLIf3iJRlF3ru13e/QYboPidvqeyi6S+FxUhCErDLs6yz\nJ66iB8QL6CQeEX0tnamwwnuttrI6A0l9zhoEXqv+V3SxtsXDn13Cmi631ch7\nADeeFy1CUUTh1FyyWj+s6gyNC7ugYL7u1iv8bPMcwBrPZGwRhX1CcfFFtnuP\ngd4aMWgtl90uxifb6r+QuXa81GoxSPU2ZJhtyStvIvil9DqJ8MruIgFk9bFV\n1Zq7EIt2H7R6paeQjVKgOsvdIV9J9vWP3Hm91sfPRYF+sECBt8P3ttGznAje\nsLAVtSpbXp+0BHfx70hDz/IbOw38arvNgIEPRfNIMpp81ZPSoiGwNc7osWtJ\nTKOc5pjIGTC6uIrArTtzWtwDLofDWPAEJVfOoLpxqwUKHpxrCqhMSZfSp9Oy\nA8Usa4xOBGYHNjWvH5ESAg03qDAqfdz9IvanfwgsfS3nDl+U7WGILSY5dxZh\nvB3wnlrq/m4b2Femxej6yiDOqtJ2IcwKcwxVwIxATPS84hrHEHi4b9kg4n9p\nrJbOSN3yIrMCK3hwmjjg7jCEbT0yEVRMZ+CV5CI6ImDFTE4qM49lBD9y9+Mu\ntIEN\r\n=n+UZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.426913342.0","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.426913342.0_1578620656195_0.1003916820027595","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/slider","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f636cde2fea7de65b73cd92cfe137574529a88f8","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d4ea9a706.0.tgz","fileCount":31,"integrity":"sha512-34hqqvYQW7gc5Ixr313LGDHmR0bYLWOWguW2mDRel1ggTfTBP2mRnTbwj4nomLkuxlQmgt7t5tCsOcYaJlhOYg==","signatures":[{"sig":"MEQCICXrYXTH8lNS4m5tlUjiWam4sr4KoL2JS+2MrGYAAxuqAiBLCIXmUskYF+UGfgHCzii+mczdgS8NtdSZ+lLDlSwixQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOGCRA9TVsSAnZWagAAn/0P+wXFCm7gW1T2YIBwBZ4Q\nfmBDc5ZZl6YpzLrf9RizvcFvOibAkKPf/VBVfKVTavxBid3GdrIFsNZ+TmR8\n4CtJnt9NsDXIhMHtA2D/jvg12+UXI7QNk4ZqddXloQFsTdJuGq2rwlOmq+ho\n6Aucv4c2ugIBAPtdUgarI+wxy8vL+IuFoiWlOifwBp4acRN3Ss0l0EoR68uc\nk3n4IUKuIw4eF18u1lKlaMoaCGWk9rMO9ETqwNkshNrLQfESiwaRfebo8JkY\nzdPJj7mjt1mCiQ1NUtYpVvBrNFtfaUx75xC+VBiAH+r8XCjCdZw4vXzHx/Gn\ne/5CaKgUSFTQvLVem7MaY5tHg3NBeUJDowyIBnRWFlediBA+O9d3eilYeGvu\nO7Bgd53mqwEIptdRzuVA45oUk9G/ntl/+c/bJESIxRDAJZBd0yV+g7pT2lMf\nFNPXEU7XOEwv+qeK0Km5xpOQt+jOJ5qlYMQaTrUq9PL9qbqGXT2VPNvsJ25F\nlR6HXmdfNPCHsrAAVnkFD5UjfTf/73gYic1qxiepXm0dudK5qtBPFLinZQaz\n7ICwJ59tnQbfaKHwbEOXBsHwrfbmS4ELnk+UgOAHksaS37AUJcr3zOpR7nr4\nVxYO2vfOiaJpDXC/Wo9ZmECPUjCf5jbQIee5rXx4Aau/q1dUOXvilhusYdi+\nbn6e\r\n=Fo5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d4ea9a706.0","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d4ea9a706.0_1578677125797_0.12814129302307808","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/slider","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba3905c71149d88fb809be591cd67a2f2fc2cfb7","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7d4ee2996.0.tgz","fileCount":31,"integrity":"sha512-goePPg87fpGF6cy/HbhoTKICnESIwDXSoSPFWy8M5F6p0ZZ357O9vHRl+AojxsT6oXNKPiqzzDab7y0BF93gDA==","signatures":[{"sig":"MEUCIQD2ukEHw4+vVhcZtgxDc5aj88Lx35vYVcLby8lxKxTZOwIgYx4Y8SSQIRYdbc+B2YlLHbKNdYp/B79TjgEZVTQGR28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrpCRA9TVsSAnZWagAAG9MP/19+CsPPpOxYMkCBcCXo\nKw8CcStNglOsPUMgGuxX8XYQM6CHD71RUJ+zpgXsIY0MFM9LdnVPO/x/WvLN\nWbaf6LcOXf4/F2vooe6bHPcX/FjyBGOgn+ZHKnn7ZevKVNJMruKtt4niGwlP\n/+0aWbJz1s8KpzC9PfndTqmGIxtzDqFy4PWU+OsLD02vsMkHLrs1e9jX+mDa\nIFCSgT0b4JGa70HHGzwWylX+wIrCXZcxt3jH89uUtH/aSlXmDcmwoQKy4cIt\ntjqchJ5EQAOyuHDZX77dvX5Crc80dgOEax9l54Xr/xN2aZsQM5t612qr4HVN\n90j3Huc1cFL2utZHeKyfznlONjGxm8t1sLzHFvvXfWX0us7eqozUZI5MHgrG\ne+/nDKErs1JKHFBcyEFmqDCuPA+XKPUSIrQfgb9dAI6yiP8Ky/dZLpSb5d4R\nGgWAb07h5HxO3gM/Z63j6NRv13e/Yqgl525IdmF99c4eWTlGCP6jSL6BRTlM\neVCQ2TlDNl2ul1UJBLTknBS8PuAl7uQ6cHYdltS7kzr3BJy/Kvn+y+WTccXN\nlYG9IbIwYL+Dtmrl3ACQsX9gR9iitZTWRYUqqYeIlxSmHFhfdcI+K/L2CJq/\nVkU1t5ZMKtHbhzcKG4maSjHvPNiUnbwdtm+riTb6i/ml1Tpsp6NVlVZoz1qc\nFQo0\r\n=fmd6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7d4ee2996.0","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7d4ee2996.0_1578679017282_0.842867278455639","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/slider","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"008d3658e430d5b1cd83aef16a8c362b1a2a7c04","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.981ec9b6f.0.tgz","fileCount":31,"integrity":"sha512-rrTZB9jjgeq4DLvHsU8qTLUMT4jONyhl3yWYn5iKMjBo6KeoK/UCpCdL9Ev8TdmAHniUP3DzSNncjFOCzzpkyQ==","signatures":[{"sig":"MEYCIQDZiYMJFXKPEtVKpZQl6zYss8VzB0+7bH51+vrAvMkBIAIhAMZQsBm5VCvm/5t/gaBorH4B7ofFotr308QsY3SlJvwI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/yCRA9TVsSAnZWagAApmwP/016qL6Jz8yS1h+1qEu0\n9yNagTvJ/2C4G9kFfbRwkvgycfxF5tBPTOjBdVAF+yWCRsXVCn/7xW9a9fCZ\nF8a1Vbc6eKqqcvHa3U1ebSb4xd9vSXluPjRPbwvGl2ZVvrfibRCBSEJk9RbT\nosqZopA8jQs7NT/1xNElWxWtuj6n0YBHQUSX552pfQi1H6vtuerVUaB8SNDN\nPOeT7LaUbY96FN0G1XByf28L6Cv0n9wTONml4HnKnp/LiSHeJAKeb2EGrEil\nyPlyQ13+6o3y9KJN5r0gi0n4kUFBKKGYe1tF2ldq+NgswTDnk+mPRoDlnVy7\nuMiX8lftfLZI3gzPbXHTnlbX09z7w+MkzNJ2Rr+IJzpQoXsgTz9zb+OkLUfy\nYG0WMfL/2Jx/aebImzKnjDOMQxM5fQ7qLRQlv9lsmCg7mDTVT0KFb3qio7B4\nu2gfBGNFAwwNhNM0aNKjCrqerNTsHZmL7fb+xcjscFYlo3B4CEUB0UBbEAU9\nobrswoBpL9XEsr6s1Iarb7lVe0EN8i1zef3aJoURgeuvdtX/2JzjX98cQ0ht\nu9kTVhcnQler7Ernr37YhqZbfihlWor8HmuD2wfm3m8dtMc9Nj1yqhGjdm0o\nB9UaVTExyyndmdp0y/EbSnD4L+baBB3jhmfVg7L7/qOyEj1UAJJQIMTXR+lT\nog7T\r\n=8pZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.981ec9b6f.0_1578684402403_0.5468263269920779","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/slider","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b5cfc42c6dc7360d46d079569af54550e57122f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.737da83fc.0.tgz","fileCount":31,"integrity":"sha512-EpCqxO55fhJE8RoK4WdciB2hnwBPuWMj5gfu9UJ+oykqQQJrJOxSJaumB7wNl7HfQS6NVdooqWGyi9ONP6DhsQ==","signatures":[{"sig":"MEUCIQCTnROJ+A819f68KKBiEB+x3NnWy4cxoneaynS6rzpwtAIgPc2PxQoSDFWZ2IzNi/k/9J1MMGShzPuL+Qltd2C3xUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOo+CRA9TVsSAnZWagAAqHsP/A+9BN+mRJvU1pwjDYl3\n1JDISFQcoNoWPGcFNg29+ZuZAzA8I3YNn0pn1X2+VlMXk3TGRNnStzIOQQWt\nI1BIuI7by8eTsglbJB9uY0VyMkMnqtWBm5uh5v6wlKk2QswoTtWuWcBdK3nB\njDmr+UBqEH9j7FTJ2USnI5kP4iIuxfNvwXJzgvcvA9qfG9rxevLddncPVcCY\nwvtLmcVDfnXopqomMwwaGqeq55ArPN5OU6RCCjrxJi8HtMHW/N+8jP1dsBvv\nDejjgOLF3ix7w3gX4QmziJDGdgT4v3Cp+eMMfVapgi8xhScSA9CF2soXS/Np\naOqgBY9RtqtXEb2gLOW9xRw7I9tgkwZx7bVDBXifG0WOdJv8AU7n0vnkaT2x\nFK15ul87vbNGE3u3ovHAI0ZDPjLnm6sEwTgm7nNmCh4f4r0naBiWUauuGfI2\nipcqD//s0zei0h87jE+OH+5xRu9Tpll03k7jo6oU/jtgw9SGdQNklo486/ts\nKi5hhzfQJzCQhJlcz4/AhfRQwSU2UJGecEtc/BAHgFu5f5fbKC9AO/NTFTf6\nIEJuNqWViD59NDJVZJXHnn5hP9h2tZXqRynkZ6LzfZ0xYOMOvFKBmt1dCAmm\nq1YEOfDJzmGH8wQc8wA0ZQva9aafXLLqKpnkiEwdgE1xnvLEn37nmp9VXK0R\n5qmW\r\n=e5EV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.737da83fc.0_1578691133807_0.9205081414007843","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/slider","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f10e786c1aaafae1d4fb7fc887bcafa5452b986e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.aca8e6c18.0.tgz","fileCount":31,"integrity":"sha512-FnnJYUN4LahvSePWo2dry7cp3lcEmStrtWGvHjlHKv2QXh9Adv3svlDRd7rWhUnDdcjsCioQT5yUyAi61PaFBQ==","signatures":[{"sig":"MEYCIQCuocTBVLYLHnK5cNPqxrf7QW9RSBHvIvPq+EhxLda7cAIhAN7nplpHt6r4R3d7rJI+LbYt4UWhfPCIQyOWzriI9u+o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMWyCRA9TVsSAnZWagAAUEwQAIUHAq9lK1A+OlYIBGqX\nfvpBMyD+e81gqa2v7z2GYgUCsbsIIShW3hAC8toGgIjUggoUihkQ2cLG0Jnw\nyfeyhZGLViovI8Ytv9Oo7QJ/Kmugi0JgnL1REZXu2jF+4Mk7HAA8kjqZQMLk\nRpMl1+x33Q8eTQ/zRo0hzwyKJ9esrNbySxSAWxBVs+9JO3a8Ui2IwykvYGzl\nHfZWXspvDuT2M1XmUa9FR/XKzRIJ6M38ARpTlAhpEjj5j8wAYdhvfVDKr5Hk\nfCnkMXdZNkn64Nbh+hMl8U0t7Gv5W4WI+edRQ2Arnr0gxKl6H7Yzx2BHLKuc\nmoMAXlXx5veKnq+a0SYL91IzWb/10H16KSGzFRY6cve3XXnDwl3XRfWg8Ero\nWmAZ8/7wrjWF7xdE6ThpN61GAvWWT/EwdhUPN3m7NO8h36NCXtAzNIxQOw9B\non0eYQShch52DIBXZJHEW8pR0ct3TRgag3gtQRjO1SZYqjSDwXPPqvIg9g60\ngcDa6LZSGapH6u0AJFQATEthVw5hg/fUgFMeI/wFShaDP7jBAUTlqy2tDV4Z\na53duFzzcq4EAiQo4szDs4Eox1gg50iJGzReXrOPd3ewaGVCrkrrb/1RTsTW\n8pY5MchstgMInvmp2XAsGtTtwcvmZeU6u826zJtjrB0suxIq18VCVPMfm2t7\nKrOn\r\n=2hl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.aca8e6c18.0_1578943922518_0.9517061786758656","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/slider","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b28e60165348bb29c692539aed6378ad2b48765a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c38d84e21.0.tgz","fileCount":31,"integrity":"sha512-BXSGT6NqQPq3MyBASB7xuCMWzjmMRlQ8rVH4tNLIPAhZbr7admTwaBuRzVNS2lyGvIM1EPYzHrBPQVoX1ejNKQ==","signatures":[{"sig":"MEYCIQC+g3HcfPKbPtHAOh0KUUYorsXEqd5eEfJuK2mKxb21MAIhALaHVrF7rVFDUN0tl2rago7vGagjhkzk+1uu1uBSC1+z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuQCRA9TVsSAnZWagAAcuYP/0soqYzWTnw/FeZZNjXD\nLcRCSCtRh/LY7TnTpQsMGCTb0QlJGYbZ5eNxVaUHMsHFiPjiLrpR7CAbe6i/\n7kadkiPsejLgto2k5yALMf2DPjOM80pN1unc49n/Hku19OZkj8gikwdchMrs\ngklLjScO+8uKg8qavz1ikm/WXR5wVLgnVH750OqWqFCALCbT+dCYLIEs3jIm\ntoVHpFXJCL37NgK4COZbzpajhlJICOVP6aw+nQRP+1D1ZMd8o/O9Z/4tqDC2\nbWLpuenN0zaH7M9nPr0j6iru8Hv3GwsgQ1nmGcAlOrFeik8GWzkag2SKUbii\nOvrUoRpt2FIkbkSSpoj7kBFsUh3kYg/PjnpE18oNakAKmzxzw5PZJV1BYgG1\nKSPWrTQveBIFxM9ro/Z8UfwW/yoIw8rCwZyWqZpE7ngSlS2G9idviwOl3phd\nZUmyPbmX6b6zR76SkL+s5hZ5DOveJblbAz6kq0QelaTMO+oKhSa+ZcarSBET\nzr5kbX1wB5GYGSvfNey8LxrfHgkW1+2mzuLE2xbg50AzSBCxk1RPwFlpnXot\nVovX/UlE5bR5Qp7YVX0eekWAe5GCmg0b0/bqV3RsFW7EDdULh7owCOKgxtQP\n/TfNGu3CBs97t0r89vZZLGR6N0Bc03Mrg074L+HJIEdPH+/CsjhQg4ggno4J\n+6xj\r\n=wrxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c38d84e21.0_1578953616160_0.15402925611895224","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/slider","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892b2a14338022f65b9ff5caddb38ffeef129d35","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a4db5fbad.0.tgz","fileCount":31,"integrity":"sha512-Mg02EYV4BF+S8jMc2s4YSmiLiUkIUSr9sfX/e53+YKUigO9scvKrDw3RczKWx/c/8X68KCIJ0r3o/z7maDKQCw==","signatures":[{"sig":"MEUCICvEbm8TWLt8bVO25cwv2Qb99RtiyypRJ+5PKqjB5AX9AiEA0cGi5noGHgCanjio5oJOL1pawPHiM2fNfw+OKGs4t3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQ/CRA9TVsSAnZWagAAW3IP/iJNGAnRD0waZyQqbx4i\nxwSbsb4rhaFjk3JHu2+VcwuPoM8l6E9a2PP7vfnZGUCGsUN9ZLepE4eseP6o\n9pGmhS5qwan8CjWfC9d8LUr/hzaeD4SEItpA158TGSnzkAR5eM1UdzCAbjCu\n5HDWtuBhFbAAYkSbEAxLcEEwX3NbZ1SotLKlR6g0uiaXetBpGRyIzRnCapcW\ncMbdc/DkbQaymFyhWt340CLFY7iXzHikzqPIxfNBUjGOhMMzP7UFKZcNAOSp\n7BX54izLcoK+En0ynOs10m5BW+SmIY5qnSz7a4tkpJlRFCe/NsusgyGhMWhu\n+HKOhsy6+ualSvRE7mj7rI0v2m3WhQQj7EYFk1Qt+CtH2fVCphH8Ml/LUcd6\no82alndij8lSa003LumWPHJqkoY+8zZVO3G5UxEj6OVGNj3KP2s7/wXYzpwb\nxcodanPSmLBw8hDnDaRabBFQ2Bj2aTwlfAOGiOwOqd8WfRb556OTX7+ncaZg\nkY5zb3rzwrX1VtuRoqhy9mcG8G4XNIr1nTVDojFsDWjWX4YklmnMKY+hG8WH\nS/FRrNTeuU9ABX5kGgs+Kjo5Ls0mMnND5yJu8fAntiDh5vklkIXO8ctojtGu\n4lUKyvtNTmj2imUT9Ph+AK7Cnr1B7BYhOB2ewUrcl/tyZweJ3aI0SZEgWN3G\nbXjy\r\n=dlCX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a4db5fbad.0_1578968127494_0.4206029579934467","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/slider","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db8d840723c83837eaef0ad3bde381ba73ce19ae","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.faa9af310.0.tgz","fileCount":35,"integrity":"sha512-oiQ8SGAi+7pYpCFbDa87LcprOBKnQ32BEgtolajNG0bKO8rTSGoLKJqf6adRUPDf9lm4yLq6xU6MmHFDXzmA3A==","signatures":[{"sig":"MEYCIQC5z9Nglgxfsp9fxEiZTxY1r5p7ehhLS6LmqHHN3/EDxwIhAKwPhBKRmg6ricdia4koAa+rnOuD5DQA1qtWOSNRjNdZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHlCRA9TVsSAnZWagAAUUUP/1EHAQ7AhYtyvT5FDJgo\nIlvn3a0xoGfdGo9/tNctclw0usov/P3mUQDZZ6zgAAj6fbxVMRIJYrYi75H4\ngwgA0oxOJV1Jxeb5XFYkemt/6OU6eO3AAXX8dqUXvDbW7rPTRNfOKXifqUa+\nJhg7ii5gMqdpL+j0rwuqRXNyEdIR9ZCg4ezZYyJ4YWopJAHNEQ7ZT1G1C5U+\n/zbDf0pB+NzHMJfnERZ3XyHAmB66Z9naXtZ4ykaqs43hyRJvdbQLs4+fWN7Z\nOSr+GccbYvhiek9GFw4dM7Vij3szqggi4dB26pX+caiLkIlXmw5AK7O/QrdT\n38RPix/x1vyy2ugEHD7V44yJEgdm+QYhOKZ5ROeCjWpZVRC03mA643KOZgX2\nILgFTr8VpquocJ85KjNFTpeYlFwD8RySL9+gT2hctemvRHb7e9ZYMHODq4s0\nH+j2f9JzYP0hBBPGzUNsSMFkY7uzl7llLyNDL1BhF6BIlb61bw8eTx0WJXZJ\nf6Z4RYAGWpqclHQ5EWzx98gJVxP2NgGYDPshFTuDQ9BrvrQE+r1x4ke4s0TY\nPBIX5Ge65PNnk6M+AqJoW2kb3Op7KvQXf5LT08PLzPkW0I+btwFmsk0bJQzJ\n6WuWFOzvuXb8tkm0Am7CUKK3WfpNIs5vW10CByJgapx7qFfYB4rbdlUlWl+g\nT0aE\r\n=ZYwO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.faa9af310.0_1579020772529_0.9976887933765941","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/slider","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b084f7078f00f21929bb6958c96797e446bc2242","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.60354c577.0.tgz","fileCount":35,"integrity":"sha512-kw/klK30n5ef3Aa9QzXseNhzMRMvIWLwi7sDk53sB84vdF86vRPPf2sK5dQppLV35hTiAagBvnSpcko/no/skQ==","signatures":[{"sig":"MEQCIAlvzaZPysd9odkViqahfPrPeOzPITquuzO299/VcWKyAiAGIgV+mINntyzov3D4il6NE82sYRtIRpqvTF4Oy7EdBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSnCRA9TVsSAnZWagAAyvoP/R5xllUcCZlGjm8CISP1\nKGhF6NmbdHWPoL9oE+C+PczEyspLlcWKfOsOnuE6xfpZWbeoBcrGI5tX3gpg\nEtLvul7CXPMtSTIgtenv5gBmFtfiEvyKH6vmdNb+B4Lq9UxDHknLXqdopID+\nKsy6ZK26b+87ny81xm3vM71/KTZWm5TLCOMtPbIohE85OszQ7Bm9AGWRJ1QW\nqRZl3Pmbi4IJzQn5BKEoimeGjnum2hF4FFwGWwm/a24SjrIxTxzeTCDkCoZ0\nUoMpF2gJUA0Z+LOExVXtUVT7J/vrDGd7dcMFBxApiSOGsyWVlgZnZylrNm3c\nMXpIi5AZKHIJAPcA+uQphZIJUABu7LJhz6FJcjUh7KDSJqzgs5heRw+adQ/j\nN0UQvk2MPxUDRFo7vEN3l3kMjBn3n9wOpF4sl2itqpPxHMuR/Brr2HbwAHJl\nq25+tIMxULOo4e6l2yh69YKa5ES7xTleSCQRlfgxDNNUmVBgwD1+G7BsCnvi\nnCJLnLHxoaok7JqkSUQGanxzmAsdJovfJpbRN9dE7SRKS30p+bzOg5tfOeK9\nxSoy1+ygsxHKgVlmnoEBT8w8hhGj5xN21Vjr3MrgK66mJeOK6txpKxT/c71l\nLdcaZRrvi784/WNW3BXE2FzqPc9xeeI2vSPewtU7rGhBXfHvECeL4GrCi5vR\n8o7L\r\n=Q6qS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.60354c577.0_1579041959330_0.8361138907883436","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/slider","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d5bb2aa14a01b6f896c0d5085811ea911501bec","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d07c78daa.0.tgz","fileCount":35,"integrity":"sha512-1zozRJ5SnR3zn9MfPoF7gB6lc3UC0u9hhHJ3q13ZPkUYeHlJsyPbAp1/x8RMgYiR2CH6gS6ZbXJ90L2yGj6ZZg==","signatures":[{"sig":"MEUCIHjTNa5ksyE7TgmpttVuS3h51ACOdnAk94nTbXcsM6gYAiEAvA46/uMcR5uy9adbq6MSG5l4GWFkMtp1H6+gnp+enGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlD7CRA9TVsSAnZWagAAJYMP/1cj+f/kV68GtKqIHpj1\npNjMt7dj3iqiZYs1MsaZaXZnvbK3n4fjxrF0Rjm6Zn2u+990qp3usfmdHOQz\nTTysKGzXx24tCBSWqHFfmkG7T9JvkLkiuxDXNKz2+3BdIZqJc8PKEJd792ux\nj4Nq+sy+f7exbtUTLAJq617QgHQQVx9nf/Tm0ptBB+tJjM2X7hM+8xg/h0eH\nMg3vp12dw/0m6xkSckqubA9ZO2aGsJ3bx3BlmTCHmqH4Dbo4tjYmfLm+ImBm\n79EaAIaItLhHkzyf6gPlIZQu0qiaQBIxrWYgzxVCCH386SXpyAW1AK0Kt97T\nNXnAwyxo3bO5YECfISM9EyttbNb39+1zkHSofMpSOqitGZHR1kRqnU8npDPe\nHAXFypdqQiEeS9squFQnfgAUn+xjbBdMNHiqLz+uLiWc5k5ln5+3FQ/ZPfuS\nsjKdeQ4i1GJ6w7IhJFCV5Jk1M5m6fIKHOdhEgckMRaRJp7dXZlySk/g+9463\nlhj2E6/8qHsICFh4KJ0FToD2xR+VRPIqi1UuWU55rbQGa+B5tPh0mvoxhuNE\nHZUMSkOVKKDsZuG4ZJrA+zDWfGUIVD91OQpSsCMBqu4je1Vz4KQdzX8KxhYy\nN1yrb1+lk+KUZTjnl9XFfTHQkZnsSeuwzMw/xczOzBOVbKUrriZE4x2t85BL\ndO1p\r\n=XaAc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d07c78daa.0_1579045115387_0.5116703611848301","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/slider","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d88f74da5d8bff6f778f76a3efd9125868496f0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":35,"integrity":"sha512-nQhMEmdk9VOqooL9bBq+i75Sm0KgncJVB8nJgvV7f1jBUSldv3wZMXis07hhGrYPacNitQL38uncg9TIxNbdsw==","signatures":[{"sig":"MEUCIAOtGbqOU+OTrOQWix3njsHED+TQzwEVS6ZhxUzOWuzxAiEAoK44cbE0b78T8l2vPTaeXCAj6wRfNgnU5McI4ICna/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4oCRA9TVsSAnZWagAAAwQQAJSlT9XUTAgyTaf5WsW+\n7QHSDDjxI8TM0o7zmNnrGnSYlXn4zYyKxJ2O6yJWXQF7I0WEJj/fLZAbdWcU\nEwduWmRZzohnMb/hXcISuUVBqq4LCyaBU3UXWtNpNh7zkr7YyotrbrNBgfd6\nl++XLsilOURPCmg5GVs/jHzgp5FnRPiByad7SoiTV42topqjtfmOuRi5nGdJ\nSp/yuVF7a1lsFTZq60g7crqkXQZjPIufFfkJtUnPQ3T0Nce5G/P535xVce6r\n/gTJWxbC9FDe6kbUfy+QE7RJIrwoB54t9t8tU6K6S4JrUK8kw5+2uolR93ex\nsyylhOsX2tzQshCPaBeGLGxq5dgKj5muuC/609ZEHzcp5JjXV/Dk7cKqYzxB\nzILBGaZxlEamm64DNBhdi6phxx0RFlkutpD7+OVI+Udu1kqZ1k4JHIA7yI43\n2Qg6IxiPD4LSbXOxBssfzVC/7REtbDBJLWnev2a8cBzlAuKF+Jl1HjU4qTLj\nX5sGuvb4XQ4dVCW8P05Xv3kJQAhS7AbmraMpbU4Z8M8U3HtS9jEcvLPsG/Je\njoR3E6LQjhq9OO88qFRUPNUNRf4Iwtf68D3htVbE55eK+LcIUD59KfZz8a69\nFzKBeuZEqbLhbRUeKy3Y05//FZ85lhU/O0i1tHETwJIZEqnB07RXF5pAY0DT\nQGtr\r\n=Uft1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.8ddd5c6dc.0_1579052584500_0.7040588387959108","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/slider","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc017d07472d31222c08a0c0272c8049f6293cd1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a9511d870.0.tgz","fileCount":35,"integrity":"sha512-a5zqSX5Q3BgfgAPnWlTmwaRWcTmHBl7X8PxJz0UbIfb8sgzN1xl6Hf4h2yG1OU0yNDYsv1E+pt/Un3cF+Cpjpw==","signatures":[{"sig":"MEQCIAplNvbamqMTjUYgDE4w9p3zH7N/v6rg5/GA+xbifxY3AiApC+SYPiuG6MtMjK1QtiwRyMw5iAiw6wsUPrWWN6o7WQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OeCRA9TVsSAnZWagAAW7AP/R+TEYY4I+FiWQmF7+GY\nuxgdN06cQkHsJTcfEJJ0Ly+Nz5/Ky8XsMNInQkXNZGEv6qgM61aUELtxPu7m\nX6SyTQwXJwbScd3lPUZgc3nYO0pB8HvXmFJzhd19blXDijf/Vqe6A+VoS7Qn\n4iSDjrFy7WrrMazZxBss8UDHrA8V5e2gIamkd2Ed8o3Z1XnSV1JJmiKU4Fys\nMiPxihjQ/QG3V5jvPDJt8KIKCx1R3u/IhGMISfDWss2E32huCH+JAfNmOASY\nI7aeG/foEKXOXX1Y8avbt3HvdPWkZ5yymc4i7aG/uJQexYNh5/XM5L42m4ru\nrCohGw1DL35QqIDZ2cYQ1E2NH3Oc2qr3AH18j+8r/+q/o0c4rsdRGayl41pr\nmi5559OI/iuioarEL8Jxc1dWHP6h95/1fcSUcI9xubMRbMp9Op4pIDVgMW2q\nO6dIFQ+BoRsQHTSbVjP2sBKFfTLTk2IhVJUwYHkYmaZAl6eJ6UbfoHNO2KPL\nrsStfM7939QA2NYhfYTv/ufHbtvUVIcQU1QQ3+efN1plYYmieCg1X3T41gFe\nq+lYsDcsxdxpKRPk1VVU5AjLTEMBMGD+AUORE2x2rmH8UC4WL27bNkE3dtty\nvUMayS6pgNklGazLiEz48EpD8cqPyDzoc8N9rklHqsGEkpY2lZG7La7LApEf\njokv\r\n=aIdv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a9511d870.0","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a9511d870.0_1579115422273_0.8528005500612117","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/slider","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4d9436c57bfa5951f0f70c75a06dc49a3560272","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7c8583c4c.0.tgz","fileCount":35,"integrity":"sha512-pP3EeIkwp2w3ChGxvircGuQ5No+XJJuQd+8pjIsojyn1BH1rb6ghZrRjE2M/Dr4Xx3GevMGYdsce5tyrYjNm1g==","signatures":[{"sig":"MEQCIGrQmcOz74E6rv2DmeRgV2GdYjUtq/wNxNP6IaPw+E4PAiAaVEOMKJXIxMLvSN2NFZ1PhzXQnezdsMXpLVY1L6S5yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5aSCRA9TVsSAnZWagAA5zQP+wX0e38CsYpHB6FZKrm2\nl5kXhYaecqShCZ3afMudGIt6pAzd9p3U3d3KJK0XMAuoHMj2rYRnV47r4Nhv\nMg62CgbsbTIM5x6hmQhA84Eod4MqQCHhN6C+tccjFsP2v9HHOH9WX2Y1E722\nMoSk3GsvRQaESumwhmo2jFhNgnRyvAjtWFDTPbTJXSF+eSN7Tfaoi/o9htyi\nKS1ucReIhaXQVGHOnJEMrPqkjbMKwujgn69tNtSP2NOh8ZiyWGD1HMDMDxvc\ngP3LGzHuB7bY257lxmvOYIkMukePb2REq+wI0e0VE7yrAOwElfVtJsbxcA99\n85Dtpxc80jZNCicEQ4PMNEsn/arfB/oRp/aDaIw6npyOcz4uFyCXrSGcETL2\nr/E2UImAnmP6t89cMxXyGTWkFCLvrYPFrAAc6biQTmAbExtbl02bOzhzlLW3\nNyYgEBwtfa5EiCJW5q0mXekz/jFGbXtymK+tKQBUgwWVEPgETyRAIDuTjavs\nbTntmOvwJKAI+PqC0eozQYchrZ+7ATKEBG+JPOhyUWJmutjKkPMBWPoK7gcP\n1pGkJNWffQYeGfJLbh7CpOWyZoryHyGSjW4KF+z2CA+X8EFnbX+f8WDFTDHz\nRrfke3GIvL2SLmhyjYnqza277VZbP0Ke9GbYAWq1oSwnT/36XVkWN8GCtYk/\noBNk\r\n=DqRz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c8583c4c.0","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7c8583c4c.0_1579128465889_0.9937683469433858","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/slider","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6935ce1a3ad78d45ea5656f9bb52394158851d00","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5d4b82bac.0.tgz","fileCount":35,"integrity":"sha512-D/1G8191MAqlUSmpEhK3XewkDpqSMR4l36uS1cWzFT7XwYatYz4cf4hvBU4wQw9x5kGqWzgfJ+83v4099Kz06A==","signatures":[{"sig":"MEUCIQCCRDDE9zXLGpO9snITuFJf6XV3HjRVNanj0GvMfFnkxwIgXGFo580kJOlwyW7fGHOlSCDStM0DOwuxbdZO8wsR0Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":347082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a1CRA9TVsSAnZWagAAJgIP+gIKqiEMXdFQYP8vssrM\nEqK4NfJknxCOw7BPkyomb7uM76bW7/EnmJWAy5BGWpchkOaU8zqcgraSJyF4\nDQbVkr8A3bJyqs0rYG9sEG0mhuaJ3SKippnLjy56EkvuSV/pkPe+lX2d9RRd\nun3jF3Pr+BQ1JjNOvU9LBOiLmGMYjMx7Ow9RZ1DGG4wCnbCrOwqysuEwC0V+\nQJDWLjI1nxCIKqEy01Gp0ETk+Cdg7+0iS3Xmskndnf93WTU9C44w+NNKi/Im\ncovUmp+KqrtQpkgOfQMhwLZJOQd3vniS9GS0o7xlogn7+oFd4sD9qZbqfChy\nSbRN3A01FyyVfuUaurOdOKSW5pMdWEziwpOA1t/m4ps0YYJbd8d5oU55jVv5\nKhFVR5YXgRKLdB5Xy35V+q/J25vCjc6C163dvHXsqirTU3myGL6MZ9Nl3V/r\nqKbKB4jwowxMt7lzpiiGc1SthBb7+oPR0D0xnMfiKLC4vy8m5+XC9cWhq4ga\nH605d/+s6ZlTPW0pTbfFRcNuJBcYl1qy6ZGd2FMTmsCrxJVmvc65J86xe/Gr\nEmAjiCbysgIz4AP6631tDlfSXAhcm7YRvm87xl6LVohgjAA6ViTHqPecyAWO\nCPxtkMjPrl78+VHeBE1NL87nplLJ7NzxtzYDolMEGfofRvVoR+VDr/HNrWh7\nq5/1\r\n=Iwz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5d4b82bac.0","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5d4b82bac.0_1579128501271_0.8821903977892667","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/slider","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b290775686a6d12dd5e70fff9263d78cb12e988","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.57d0186e4.0.tgz","fileCount":35,"integrity":"sha512-wsHbr58CjoAssnqm3qqPDfbmqP+69N06nBJYLbOFmOH7y/qs+zxaHpx3d7XKWTKJ8yoyU6AM5FO03jMeMM2/bw==","signatures":[{"sig":"MEUCIGfHOCL3U/l6KdGqN0sEwia+EgRqGsg4Z9UWfXNIobYfAiEAiXOBRS+8ojaxTkxlXWlywsPoTE23bUjCNa93x0VxM3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKi+CRA9TVsSAnZWagAAIZQQAIDVyfYyetZXjVKuRhAB\nm5nuXpRS5bdMx+Xe1b3e3QycumlTjna3sq59/MkWWHsa0AZz84VBGRo/9LoH\nyCwRae/cBL8UXoo82XVSEEeh+EbOm3o5MjTTcpQXxhLaImipyZT1yiEmRlVb\nm61Ljkl0LxlC4TGbvn889ZghmgOjfqvN3Aag315WAd1tQCjU2KdJOaUvRgYp\nAJjh8V3A4+MrtLLcOcoeAgSgEHsOY386lOvtCJRspu5I1YOjuSfXmt5druQ8\nUqYrwE1hkzI3AMy/9H8JBodDHV2A9BGsMHGo1SEZIAJ9h5xLGJkkTaaGrmkf\nLO3dnQoxuHS7hUfaJq+UD58Z9FYrcvkhCFKqyMkEJcBmM9Z2QVDAWcVyJY3Z\nvp/0MSCzE+78EZwL/Q/iAVwXLx24vLBkIFtNPJ3CMHpTPUcyVh4IO1PFFEA/\ntRBCBhcKajDPTPI/L0Z2tfZW8zLSIhWxZVjVlf/GpHETg3hawNCaLRi1Lni9\nnEKyHnM6GbdULqR2Tkcam5KaT9dABMUrCQuLmwVJafK2zb8iAEMKpWjUnyXV\nuyOT3JfpeEUQ7Esi03njRpxN3l1iRWA+3GVLcAcWHw/Kan3BmMx93MzqOwG6\nQwvonVC81tfDCZUdTVpkgAKc/6v+hQETlsFfUugg/41o/Ye6li3z0VRxPTtt\nDjql\r\n=S/Rt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.57d0186e4.0","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.57d0186e4.0_1579198654146_0.5628733459584734","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/slider","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c32aed5bba8065407289c17e2c577294b3f94b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.071a6ab70.0.tgz","fileCount":35,"integrity":"sha512-vhol6fbpKjcz+Dw64LE4+qoaInbKVTcyfBn5jChRdWBrVSZz7Q2UELH1GWR9+AaWXuUHkklRm9xgy0hfISfn6Q==","signatures":[{"sig":"MEUCIFEmLQP++hVeG/JjerIhbWoA49OczdNoNXDGfrvg8nmVAiEAwrsc+d0HCAlBIVNi7eh0WMRVjYj9T4IqfDR/YJqk0X4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKo8CRA9TVsSAnZWagAAaDsP/1ZWoolJg5Fr+z510X38\n4cfm9wdI4HaPBf6cnuQSrnGN9pe7yOK3DgTJK2UuYCoYLPTx7P6b7/tjNSa8\nUP5ZYy59ZL0c+7WOkLpD30d7CrSrNvwYcUwOj0+o2a8aM6IIQitBF9AvRqcp\nG8ktHGUtXyJMWvx0JWNwVxHE3XcSfWEmNb37qC/7D9FEO52UXpjCgZ2n63nv\nEOLB4SvXMvSGYxtbJ6VbQMRqq0RVSBXQyK4VrtRO2hV5RAbbmcjJW6VwKUH4\nA3e1CL773I2Q9Sg50pVJjiGXVdfg6EtA7BU6L1EQ+pbpCfFYIDe/+N3l+SWW\nY8zpqPc7wfElIw9tY5iDdWH5/KGq47FIV55lPhe5tPpGQ4YJI7m+tZpDg65e\nXKHU3+bmKwuS7PtgDbHFu+81W/7GvkgNtJxbBQgXlL5aCACOZ8hqUIp2Y5ez\njq8CJERwYTUjEg6s8UqnKjV+7iyofujyjV3LtJvPQ/2M0+75q6dSquNFcr1h\nYG/x87W6pR6te6dd7sJ7HWfLJhm4+qGcNVv0CKE+gyJFtVqvcG2tvgdwdMIM\ntNzivV4HL8/i6/GnBO6qbQC6Vi6iW/PXyDKACXENOwoXlxZ7jm+g/L7WxQ40\nbTnRYEmMl9eRShC6mnaPTM8XiW9eqy40XTukW6umxvkQfrgseuU+AuJecCju\n5baD\r\n=NF+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.071a6ab70.0","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.071a6ab70.0_1579199035846_0.8460530996198832","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/slider","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a280585f60f129c9bc87d04de6a17f8c611d4269","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.22e0cb618.0.tgz","fileCount":35,"integrity":"sha512-6lMHIlAzDRic3At3PnNmEwWlgLKLAkkUgL6dc3WeZXYIKq+5sFm/OAdM+K63g/de8RpeNr0R7pnvTBstq1KAkQ==","signatures":[{"sig":"MEYCIQCksbv+bGcrIzWzM+llAibI5JDDvxC44asoqMdzhxhqAwIhAMXnE7vV027O9Q1PU43kyRWcr21wfpmn6vQQFbBSxH7d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+lCRA9TVsSAnZWagAA8h0P/2yTp/U09il56KUMrtRs\nqfpTIxBfX9k86zWFoIlX9rwaMDaFdp5rgwIFAmiP9vMECQr+AnlujT/qzCdQ\n4XCnyLhphNLIXRMJ62uGHBRcHol4gxI5UZ4j9iHLegpYYH8rVDZLY/yQpNUO\ni0nfHvpiFoE20mjZx30zqJhjPqr7y4+30SWauPHlp8gSdYjzPTHSSq9QqbOw\nAzJMc78HP2fpd29CtgG1QZY38/WGqHQ4HBzq0kj+GLz7GmLTNuYYpGfszBWY\nzTTCKzh80qQPffmblCHFrrJ0RA4PTnPsT8EdzNQTY6znOM9CU8DvCSsC6mDL\nv/KsZO+HwKoZKQXGdJltPXMLWdy9qXHiFWMF5AvCehsYxKsVCUPCNcL5rYLc\nXNcDK0NtoOkj0pU1jcfKnpo4MQPwVZzT2J0V2/N+sVJ/hZq7qmHpJKR4voRp\nRPByPo4vi8at19cc7R/nU8kViN5eiLEjLDonE6M/mJRPGqHU+D5oYD5jblkM\n154DGZKScKOInob3kPg2vYjJ4twpB6jk1Lrd2/myqW0K4RO2+3pVtq988Zel\nLN4wLpWTU0HwvJKLMAAXpeh/XOy+3Kvdn3ZOXpmTKb8VArloKYr3OFp/UZd/\nsEDf04TscXVOTu38wlyTXSd3Jq+Cuj8MR2Bnf91FiOzDdVHtfMn3etG05NkA\nhYM9\r\n=c645\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.22e0cb618.0","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.22e0cb618.0_1579200420965_0.4981983343173648","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/slider","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"884b9732687f848ecd014a2fade7f2abdc27d818","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.f16f15b8f.0.tgz","fileCount":35,"integrity":"sha512-EBLhr4ie7OJiSg5WqxvS9anzBF9fwm3yLzpzAb2NCmOzw7yn0PpklDmJU5tlnAszbNVVGzFholfLubzGgYG/Og==","signatures":[{"sig":"MEYCIQDNnUmoiP9kaA147hQvwZyjTIikVuYw9SOuSQT25PuEBAIhAPMPENqHRCyrqUBofiLHZmHhKzGReNd13CMGl+VTj5Wj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":348379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqnCRA9TVsSAnZWagAAwdkP/iDxbwcv3xtXZsd3X7Fv\nXaQDNGGIMHA3mtGGQ6eclItFhSSJEMq5faEfOwoVrHcLkZCMBLVI+CZSbAYx\n3SA1XdBH7O5os90rjuoM8HVFuq25B0m1lzUHUfCeOBpIfqxdlUE7ziRC6Y13\nN5fHYnHhjy60pnciebAmu2jMyLkBZMJ+psN6VUzFw8QvaCKy3qSIZR6wG9/3\nh+XYU0ZO30CBRMtZk9cOsmQAk/KATYdbhatkolG8x5B66qogm8RoDB8UzbQX\n6n7qR7Wm6D+I5yIbYywSWuJtxhnEdtbFkSlLdB5pCovuWn07fe2g2AtQ2wuj\nzowTod+XX6Q9A++QcV52fPWzUfQLP54TjCZ5hNzIM1DEs9YTs6S/yQZxCE+3\nf1yBCW42j8zU5vRV3eRsS0fbwxSKen7kJCfbOuu1+VYiWuJtHys7iTz9ZHZB\n8+vBa2Qi19BLDvi4i+yqxlImX95Pni7eolKeUfGliueyEfDVRexZUpRf7ZSK\nXhd7xvB6QxKurpHHyhsQTzTqt8VHIM7h6RdaZky/kD39KJi7E9GSmknFKF+0\nv3Xl4fRzlvdeN7F/PIaa8u6H7KuqaN4wm8lN1yPxXSrTvyUSfTPNXMve3JY5\n9GyMVDAUR8Hkc31EvCkXUSZT/We8Xs7uGJn5TsomB3MKf5yBHhYawz6T9Old\nbU2P\r\n=nff7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f16f15b8f.0","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.f16f15b8f.0_1579219622682_0.7134582753358503","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/slider","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9753a57427958e8237f248b1c12ae07dece070bc","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":35,"integrity":"sha512-OlQJi5iFVaEVyXl9y5lI8+YRcFjrGpRweael+Iag9r9C2yVJErQXfOTt13+vVXU8nlDQN2lU93coDRn3Y1sk1g==","signatures":[{"sig":"MEYCIQD1ApKM12a+lLfhaE9nmhpal588WOQpArz82NwUZMI90gIhAKigGZO5lcu7FeXPvxK66g4fDdh3Fq4YoSHPUY6yrno9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGaCRA9TVsSAnZWagAA4EkQAIgNiY4XEmvj/Hb3wtkL\nZeJsu/psnBXLMy2YjtT02JJIuH+ya866x/RinXcuhhNibMru9gg2bPXCW6p1\ndYj9r84OcAbsP4di/j3Ho6Yi85+jK+8QverTIL61HpseDXnnr5itgg5EXlkH\nOOHanDy7RS482fda+2sdq2+b/e+sXXjw/yxxq2xGPLLc3KF8I3yEyHSkkXpv\nXYtVZZVwcvC+/xt/76CgEYxIXykaIS8TKZSXm2PDlC5ZW3582xGuWesd8pJW\naWbCsOVAKuNN/cgAhhhvhMm58+4egFCQdXKTmAJpe8O1hwM6UGhq5alyc8QF\nJzgVtkYWs6yVQvUyGUpyPQroLEpWCs2qdt96af/nL6/8s8bGeQxgZtldhhBp\nMyMC9erZrhR641em3XxNYSdoDHlhwSkbr4hPyfTjVCzn+ARvV+SJcsfsZYaW\nonwu9jmYBOjnK26HPfcYHy2BkNq+HyhjKVoQVvsebOyMzGsXGMo15dB4dZ1i\nshqOYMCp4yQB4B+5HryG81vQUjSKZQH7eUEfumyrBWA69hijgJ49nd6qyASU\nB6GT4wAeQSXaolskYhtKbmWGcf5IuCvKlua/EQK8cIcT4BbXeKbD8la2fvR4\nCgSl+Vx3zIojb3AWppSrRJZSncjkFLWYZEslvLNnh2KjaHRSN+NYzK2JtTQe\nBDvb\r\n=Cf5T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa8e43e9a.0","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.aa8e43e9a.0_1579221402347_0.7507010721205065","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/slider","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ea13b93d8eef97e85d9c7decb035c8443972adf","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":35,"integrity":"sha512-Uvc2WRjSizkZ8tli4XfaSD13g0lmjWUkLOWU2kWLAPh2dOBPbz7++wmWaD3nQK6ZpiquxVY8QOspuWVDkU+HFg==","signatures":[{"sig":"MEUCIDKoILTzKWFzP0muKPEQCTNfvThUVxiGCe2DyRdPemHhAiEAw7qxjCPua1wFV/RcXlNgB0zEuL3XPQhwC7FIM+Tp6H4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQchCRA9TVsSAnZWagAA14gQAI0NC9Kn47Z4C+q2g7Nj\nWsf78AXbvzjzAv8XnnANx9R3Bc/X/4V8WSIxkSbrTWQdqEi0aNlAn/5XPBfn\nvgVFKqsO8VBk2d+MqEVdDFtSn+k6iTm5B+7VpCz6tM1OUltJ3zLPHomYdUxq\nov2G08nVvz+K2ooqnNZ5zDdydgh/bz0E2ggcPupYLFEsFd8DirgKvRjiCL45\nxFY4KJJb5KFHD7wRx5PgG7wonpQ6kcSBf08bDkYK9NdnF+bVqWsYIbjTLWi5\nv0qLAfzfCx5sDDkIRY5j8YJEmiErmQWqcEcUHS+KGBrXKF2yhLm5+Bhj3cF2\nIOCvFDRCP2FryIOXpuF9yehx34hmTGHgXprdXQsJ+qzZyt1f0+rvJ21xDogi\nTWUZXZvhsgiZ6z/qiPseJtI8z17dA1x1h3+FZHYTUKsrOGbfjD/8MaLa40UH\n4kFL4a75CcU2dDna4vWeC7sp1Mev+GAxq4571XuZii6jYkkdH7hdw7M0KOXF\nW70lBn+saVX6jAdlppR9ejBsDAAvV5CfMnCvZURkKDhv2sRxuQixQe9tqehV\nTLuIogLvV9Zfn3PPO0fZWbL/GqtSpyrskuf4OHUECeKmjchcHUqiUn9lV1MQ\nklYNev7yPEbArJpRfjmJBE/+zRjbNAqUsmvAme3gWYLllDeYfp4TNGQRzb7X\n0liK\r\n=prwV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe1f3ca07.0","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.fe1f3ca07.0_1579222816780_0.2485376569619755","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/slider","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b985c5026465c478eb0ed66d17f3230ef94a0d3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d405af26b.0.tgz","fileCount":35,"integrity":"sha512-QCJqygQWZ/5xQshg2oy834CP83oRt+cGpIdTk7z1SEKBOCqklL31rw0R27o+fg0XA41bse2aQ/UxFiAW/1mO3w==","signatures":[{"sig":"MEUCIQD/Vkf1ofIUmuG2gBEZaKHV9AdDdgslm0uWGrC8rAQBoQIgCxg9vRzAKe5uEo14kqngyKnfpAyuTuFPS18OeRHdBSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfoxCRA9TVsSAnZWagAAYikP/3eryOnez8EOTi/ztfcu\n1IF0cdC+kPaZPuucO1wdHb/5mXgt0Lmokd3Dqb2eUr6bADoaWO9L8tTwTAtx\nplY9GulxU4UkV7muQaKkRSumwRcMnkCwYAXkK8cSXJI7qgpVLRjVO9Fh32Oe\nLAhmst9Lj8VW2fkRmmKzDp5JH+Oryd9u+DKLKjN9CQrp4X1g/wzvosNCZ6fg\nzNb485mQaa+4j59OscUlWHPmOLM0lRyhiVVkNepdU8CQ6of54DY82sfJOPfs\nZmt+ogFNvMzm7QuLGbnir6U9eb6/N+5J7sjEOy5GtI9qgNuCMShBr5rSaDRy\nLHAagBA7pQJTUGeJ38O1rhOwmh5asuU4Cp9GLgVmdKYQZpDNXlxa40pdD+ZQ\n8mQJgp1LitXqWUF3E6LVzj6wcwyG28IHX9oNpQ6WK3g2XxPkqIHs6rYNVAqS\n9YqYfg+n+Bwh96v7r2A7qPmL3BLzuuObupibyYg212c7S3cIJObUwyOMZqtH\nij4dLhYr6cJwf1r/+f7BsuukoOhUJVDL0I72m8u+2SoVjloUBsOJmsnBb13J\np8UouwxiRebeO396/lTu2hRTuy0BfQLLqgmcaQi5MCLnCoJYgZMqK/S0z8pi\nNgjfpSuNmGmIjXxAk31TK6eU9pvxm2wpKP68F5vcLZPtLfug6SFP926KLFjM\noGrT\r\n=0392\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d405af26b.0","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d405af26b.0_1579285040952_0.8388401657605424","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/slider","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d876be828a0573f0d9042773554f9550c7aeb8b4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.6e857aae2.0.tgz","fileCount":35,"integrity":"sha512-FnKRc7y4Gne3gOiHfAdwPVOfyOHMi8N49+N611mF9HDGBAfvwGLfmRb+2yDu5WUHvhUaz9WBTEvNhV4I5VLT1g==","signatures":[{"sig":"MEQCIAyDjgHSnQHzCsTu5UDpAgV0kCY4wPjvTdrHAg/vkV4lAiBqfIGo9qw+xgm4JWL0eyd8IaHTAJwuQ0fBQcFYVH87wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfr/CRA9TVsSAnZWagAAmMoQAIZMjl+x/Gw+PYVA/zZi\nBym+Hekgdc74d36yS2UtxYspQ4MiFbpj8YZORQm/gdfYls5eOocD5n/O9rJo\nfTxUzv5E+VQc34ovuGcGbfXJufhTToWl92761X67Ti9e3Z3Lry/52fHgFr+y\nXA+aiTrG61J3u5dkmSsrBfDeXQWDWlLsCpZfSU25a45Bx4POpnGiX8M4KSop\na6XEyd0dnO4yTly4z39kFTnonl4+g+cHuPbFNVjFgQO2TU7XzfzQpJacpYmP\n04jhbnv9F7yKPXLQkp4uz6IGv8k6CsbVNUzz+dd/K+88HyOhXcvca0yYJDTw\nTGqdBjhu1cIBg+AU/CUXa4KQnhb7QXfT7p4o1Ox9Jpit/0eXa/q4CrwhQuzS\nCWjTFRD9l2vuAZFVToHmjJD36BKgD60ayMx7FXEaVyGj5gVQDQ7TIIYbgM6o\nX4ytA5NDDyG5pu6TVcDyo8BMdMvJY0F9ysY7hhX73aZymm7+PyVbXGRu3A7v\nbaxZRZb3YbKx3MwMsnI6Q21c2xvzwfDSwLOP1EKPEH1w6bVSO4HJMSYSWzXT\nC7HhyPM4M67YB0s16kXR6dfx4DvRfJmc59Oi0yhBwgFBAWVvBlsDK13Xu7at\nJj3IIiq3brKqL7Kq6913dxS/WKrullqpivtk/tKrAjHqVIOk9PkK5iR29fB7\nfGsf\r\n=Lv68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6e857aae2.0","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.6e857aae2.0_1579285246829_0.21291560928507636","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/slider","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"860c80272e3f5aedcad6199690e03b6a7cef042b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.e2e764f7c.0.tgz","fileCount":35,"integrity":"sha512-sqPnXWmCovRAOXoDuGCVRgUzsf+pGqhnpiTsyr0o/ubb9S3z6o2ZgfXNtLe1GVYJXuNPPGZgeY4gkGC10IRpWQ==","signatures":[{"sig":"MEUCIG41wyyre2Eq+4Dl1F5VOjOys88OMjSRjxcOqyyAZnECAiEA2K5hY1yJfUpz+Bhantg4Bv0Xa2MD9Xbt3zxEbgStxEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6QCRA9TVsSAnZWagAAu3YP/00ZWqXcWvIzn0HcUKpK\n+dyyTwHw71YXv8eiVHrbW+y77Io+0Ipa2nmDLQUEtEMP1l/1hItvOdB5J7DI\nrjt/QncGPl2RuCtOGd5ElHl2MCuyzFQWwNzn9GCq3eNd8r7ViUDXuGsn+LMz\nGQVMEwql57qWF80Z1GmwgtJM/GUvAqvK542v8vz5ztPvsPHsG84JB6E70XPR\n/0zFJeG4QhndwZ4KxtW7vkOTTv6ewHMJM669lxRj0yht8Xm2Mm8y5byRdqq9\nFlLFwh1WnVekbMs42yOMW4k6KRC/38wi1759pO9OtpSNrUkYwYwHUQYXCxJx\nKs7P32QSX6UscYwk86sVe+P++6hOmB6f+e5IAsExgavenfjjatcVnEWfqThx\nLPl0AHXbIxwZpXnduv3oRmWc0IxUdLU2Q/cecxHVMtCKVqknok8bQ9jaZ7IU\nivyMnT/mF9XHO4b3k7pBB47xADpSF80iLuicDLLSLwf78IwF/3sMVOhsh84O\nZXi5JViQJm25lgJgYqrJRZv1GH61zPIgrOXMuwPRqoeeCIoJZcZd845S1NUT\nLCAPVn9XBGZaT0Az+/SjoTc+rVzsJCpY9aNHG7LTW0x4sJhjdKbRA2y8uhMd\nG9ARURistdKusi0hBGERtwbtQSzw4mrjN4+9YyFfSC/5NNkmAXhmFv6SuiYT\n5aMK\r\n=GwW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e2e764f7c.0","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.e2e764f7c.0_1579286160330_0.08269634870081011","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/slider","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e88771cd8888ad45f0207eb29dcbd46de5218eae","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7ef986a87.0.tgz","fileCount":35,"integrity":"sha512-wMUjRSQ5p0enZmWuqqSYJ6YYMq5yUP6/tpLi314wkuxwGkzSRwgvLCJaHpqRnLDciAD1jiv5gW8vHw/gTsBenw==","signatures":[{"sig":"MEUCIQCtuFhlZt3CZvnllXIjDsYg3uHKwS8t7DJS5e+rurj5kAIgaGAqPlju4glPVgptv8/bSN79Wjzuamh7DM0dPArchxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtrCRA9TVsSAnZWagAAUPgP/2nI+3hf3F1ogOnfcjlD\n2BaNlIh3aDacfzIlZ8vXJE6cnGYPLoxExQmeO4o9gomnwosFH85H9AQ8L6oY\naMBL9gxzBgWpKSKAHlTs4Anu3eyuoG9DPzeHE4iFLDPC7w+Fp3w2vjRsO5TR\nODDbpsAWK8F9JWtO1bdCGKewlE6sV1pOo4SaPonz86RW0W3YigiKMse1lCmu\nUX8BgzLutV5IVxfHMnc0DkxAvZA9VRUx0nEbH+rKMtfDgtn7c38ilH1arBc5\nSXloF2+J2A7MyXn5yb8xj+Kp32l7wXjizhoidPDK2gDlLNLYoYi2THHYdVno\nPCWXdotO+yc3LT0GCJItBk7B+aFx47Y1ov6DrGTXqNHoNjrmb31mMQpKxxY1\nxm/tnH1o5qq05IotvV+UbTb6ihA1ybHeN7KrZ8AA3C2oOukX/GHF7aQImUWt\nGSY0P0t58BjWVjro73maL4gloO+TLJ0kxuiPPbjRwptzCNLr3Bzgsc8H7l3j\nf0OFFSzUn9vbS7qlUDdJxUaDFWanHab1YQHfeqx5VTMZ7jIe+A8uKSHn/DPn\n/1tM91cDlTbrGJaGwtgoQbIK29vWF4VXyRyx5/yy4+PFvC94yPW2/wYmYoul\nqSoSk6DD4nVgd9LEdpAAZzuVK8aRDV1EnrS9sy8X1jdQxzoZ9xwiliFx1Sx4\n43is\r\n=1u+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7ef986a87.0","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7ef986a87.0_1579289450773_0.38014501634609377","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/slider","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de10ae6edfa3fce1e3bfd350d7a3b15cede5fda4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.29402e2d4.0.tgz","fileCount":35,"integrity":"sha512-HFeXZ/ekVxUtaeP8q8H4OM1m54z15xiJocwfWHR4NegJw/Y8Gh7OesTXSvbCh/ab+nzZFsWQhcURFZhN2mrt4Q==","signatures":[{"sig":"MEYCIQDEuObV618EA4LxMiKgZ2ujb4PJSXbad8fTgAhXNkHlJQIhAOr+/xkAqpAX3q/AasUf0QH9UoH2ku/bOdwzeiZc/tfd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuWCRA9TVsSAnZWagAAe90P+wVCpSvW3Wr5m/WygUx+\n5KSF/6oOO3mWBo7ZZrHevOs9xEVjybIH1UZSRBkf3ezmzzuRCM6XRzMul78C\nrdgmFyVN5BH5WTpDSL14D0dQqvLgAuZRBdsSDi57AJSsc5Xud2XFBeLQo9JD\nelqM/z8Suyq0oPL6Jn4banAbTaEHNJeF0BdCFlzhwXYe1k4v97gqrJkARWY4\nvk0SxlgX371NkEnVxLTqB5ewGWXPSjAkqpasKaP+J1x+ZdDFqKz5p5Yf7Lyf\nkAe8z5QeuphBVozIIMwkxSdV2JfoO4D3qJEMaOt1M9EcnzzL5z3Mycj7tKIV\nK0N3JDKHl/kv08B64z//uXK2Y/z1MqMvJ3VTHQAq8z3E2FgAjfUtCGYizrxt\ndWHJEOoZc0sGaZhBMz8W6wCqHKdqpFRRHoLiSdABMh5NL7ymMMr4bOuD8YXh\nXvqQL3l7yJfdkETct7CNd6TrG3WttoQVqCzoOf/mqgXnJDli8MQrJ5zM878N\n+pQsilb/5Bd4DZxHs7ro2Blyp5Zjv47YEIXZUYmsWlLF2eShzd9+zdTOM7/7\nU+oRJ/loG5I1liTGBk7JkegQK/EvGNarMGyCgNMLpP8NZgOxrvoVG5YRfu71\nd/wxWNJZbDygUx2lH0KgYNcfg6ARldrCJqiyw20O1vFJz1kP6MjVcSkE8IJD\n0pE/\r\n=NHC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29402e2d4.0","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.29402e2d4.0_1579293590340_0.4466983798580584","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/slider","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"966abff3cdeec3b297f13894f435dec548d9ed18","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.2b3ec563c.0.tgz","fileCount":35,"integrity":"sha512-VnvYaZZFm7ZcWD4cSR5918sWoL3ijS/7xyvBPM6cvuXXmOTh+2zzzfoFDpQRXFA5Wow+hEGGdceLjtxJ0hb7ig==","signatures":[{"sig":"MEYCIQDdEU8cGEyuAn9AIn9V+1Y/WdYxOLHtRBS6u0qaI/5ERAIhALsoAO57xvDqTN/eyBdngrO5VA7Cbc0aGCZIHhwFWnS5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8lCRA9TVsSAnZWagAAt6AP/j6k4cGMMpwRAbAA8RfB\n1pA8afI5TGBrsiSch/OpGdpAaKKruPcLAeAX7S1pS9XWvF0rwrysoeuf5RN5\nODbu41+9+G0gQnJ+orQ8EhlVD0JxBcgxt50mglLg8DiSoNGSIxRhaeD1YURj\nBnzUW+KHQHJanVYagy0M3PfP7Gfg/ERZeagqNYJTLiucSjSzn8k1AWahTwDW\nZivI4G5inPdGfNTxdEUa2XYVxV0sWVcgd3cIaFGeveVNUYv8lulnsBFp2aUh\nsrkWcRKofZ9k75fmIh0JvpSRhOoNFrygfcsFORi59BT20EbrjnNVTP6QYUA6\n1+AVXvgGvpKff3jfbg7yg3QMbb7tb4qycszpol9VJJu13I2AQRwCSMDVaxTB\nlcWcPycxy81iESS+2cMj2q8ERzJ1/VuLu//11mhV1c4m9NT9u75yiBNJAxX6\nbPiK9T6zrx6ibBDaFiI7PrCf2ZIQ+/RkzQsSrrF6DyUARtMgUOOvIrgxD13L\nkK9E4SoCFt84zuuQmEfx0xuJpUHyxV/6ZVE5KfiTqQxRdZO9LyfiHde4ytU8\nSIWznnWlAFAzIs7RS9EMpep2TD3xbM1/VxEyNMWM65NpezqUZ9km5XLLolYA\nqjS94bhiVFsTO6MyXmno2h+Pvzw1HXOG3MMPHWLHDgA7ITs9iLrvzWSFIZLo\nHgn+\r\n=H/yG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2b3ec563c.0","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.2b3ec563c.0_1579302693012_0.8194373653811655","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/slider","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"503e31444bf828ad6ceadcb4cf0eb07b15136b92","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.e8a993677.0.tgz","fileCount":35,"integrity":"sha512-XF/oushxxMYdnWMTCGCOhEdnWTgZnZgdlQaE0h9jQtB5GvZXOOZqBCm+qpIPXdMnKQwJnjDxVWlPwpxqqmGTXA==","signatures":[{"sig":"MEQCIBodg7AVUz/qzDUAHwoVJYvfpbrSkM1ckATUtWOYCHFLAiBSVeL4OyR8Yye0pcG7l+EYZd9zRyaTi3xxsPQrw8WgFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyulCRA9TVsSAnZWagAAGYMQAKSpMb81giySBzfqskl5\n2Xm0yB+QvwcCv++skCEwS79aCCIGL7SGF8f0iNGFD8YkROKujNEm4eufDMAx\noVbL2RyG2IKIbLfe+aWMmsxP2mEqAP9/esSF3lxcLAFwoPhn7aAwEuXBwdgF\nMw8u7A5DJuao/6KyzD58O1O/S83eupz1VkUA4lvuX+ciDUW49ah00sLNOm0S\n1gB9mv5cmlOpfyme3nl655kSfaVxTaUCYfxAzprNZn8IWavBTsLoh8L1eH4k\nXVPncY1qGrhv8R3LAhgMlKEJDctu3Kfe+rcw08z5HsBp8tlUUyBUyPmEowbp\nQanjHLv0ZkDqr9dsqHz8KagCET87V+mrrad0FTxl4tMasC64FNStPEmbKwon\nTbdwHITCRkYbJdVvR7Fo4B9pNPNMefcQHVEGI/aBHEOccNmJ4HrLnCugA57F\n7nWgumJfdWF3EktrpGvZDx9W5iAdxx4MeFX28G3wfvccwZeNCHKaQms7T01V\nTQMKzbDw1eg4Geb2Ue4vvLKLg1vgHdJewHTheFkC7ShctGEoWu/0a4rJ7bH1\nsRTwuUMO7EB9yOsgMcvfg3yUzZH+sMtzimjf0rzvO6Pk3Cj6Z6EM9eJ8Ii2Q\nvj1NAuDGDAgS7w/nry8YW8N8nkUHn7IrcqPT+M2I1Dg5V1lQh30bBXBU2SO2\n6zgq\r\n=88lC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e8a993677.0","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.e8a993677.0_1579625381070_0.5073573411846528","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/slider","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68b7cbc075eb3630e6bb778a4bb8f973cccc62e9","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.cd4903304.0.tgz","fileCount":35,"integrity":"sha512-2+XJ7rHruxjbOZ0L9xJKeDPD5gq2G8qWSMyv9eiqpTEHhc66i2jj3rknIqM4ILgYjbhKQb77UmQK8bOO/+DzRg==","signatures":[{"sig":"MEYCIQDwmmE6e36GywTApAhYOja8C2n7iqqmg0cOyRfTWwGWQQIhANQDX2qv+nUR8Tgwg/j/6P2oswbofj0skbjA81mvLXd1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28SCRA9TVsSAnZWagAAyLgQAJ+wctFnUvKg8p0DFPql\nOd0oAS6xwL7BkT+jOJjLEHkV+0E0Ihp/UKmkn7jFkZin1193fK5yPct38Z4I\ngBX30FC9wAvEjK9Ak0xL+sovKUxjeCNdu/K6OUrvU2FnCxZobZtBHklWv6bG\nqGgkdT+C3yxuAwIsXItiU1EXUfOCt320FXZRvlQgcBs14F7LhKyYDl2dV+2I\nhxh1BCMUFLwEIgFmJUl9uGxguokvd0eoIYZghKA+PElTPdANcZow9JDvRU82\n3inqyHw+SIB9/ZKwqItnsl7Yrf8O/FDehdpiX27UMjdHVVAeb2NRs4AGWaYy\num5ORTKbKTAxOJyTv1aZzXxwMkt7bSJIg5xYo0sW+0/pkN1BE3nineOVgvRJ\n8SMH29Gq+/BWQ0s1x8VAZT+ee7ygGIQifAZG2Wzg24F26sskblraldSJAR9u\n4V60LW9GbNspdQWyGYdjFVblq80AOQlizidxQPRcHGt205geJcj3oHWKk4cy\nK/BYlaHMRnrJhU5UeplZoMDN4WS7rA6JxFy2Xg8qA7DK7C/qjkKmkZd7fI8d\nr3KcWrXMoU8SScWMr7Q+GkIiKvLhSzZprUdkr82RUrutJjOvedimHT4n40ng\nTuj658uNW+2NaHgGrC57lrtwemut3WmUkGZrgy5leT/wNAwUoefN9+X6wKmI\nHxM+\r\n=cib/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cd4903304.0","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.cd4903304.0_1579642642307_0.7321074699275496","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/slider","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"244fa80f40306be2433a477781949f1997e30f55","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7e4b04b25.0.tgz","fileCount":35,"integrity":"sha512-xB35kJQfr29v/G2MNaCJW+qJ6SzFLPkcAaztNZCnzgqIIaZRun+7KBBEsH/lIa0P8VF01ntc1QtgbyeknE9heA==","signatures":[{"sig":"MEUCIEAXw4JQPQ7BSZZiQtuYjlu3ezv/WOdGTt8e7FcPDQQRAiEAtKpyF8m2v4PFMo6EyZPFQF3Y4bVgvw5rk7d/PjXmqrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38tCRA9TVsSAnZWagAABP8P/iM4sQAgqrG2vdHuoJjz\nvT0z4Y2PDj9cWcMHkgOOcnqfinWgUDt86gRnqwt58z49GnzLg30yqpvZHYpX\nbrD0bJzKhWUxwrLUawrfrVP95k7N5cprt2bP+MsdHTNpFIZ9kpUh4RSM56lt\n9fUAzvPsTL2VCCLnEsTzkVv6VKwxnYJcY5NWbjRIQKbu6CiWscRa8z7Re6hW\nVbu0OxaZRxGHkbpPdX8f2XjbEcy4jZx38AeB3OvJVf2j2F32yCn7MpgM5J8V\nZx6VPRJm5ZC4ohql3PhX/2SQt4rW72HFqhWdmr2Du0DEPf3PDIlTfs4jjJy2\nbvsF8z7Z38pIhSRn5VAy4HCmjlIaC+duia8cWFzOfSq3NUXeZPKsC8cwAJOL\nZCtKHcrZwizWxWhoU1s17Qzb5jYwY6r/rXkIORk5DL0Uc3ajYjd0EXcxa40V\nimprBqOrn7PCKrBrMVDuCIi4U9Y96Y3GJJeNPSNAQ+KJuaSjXvDwF4cCPFcn\n6W+eguOnmGVkmqBUjIHb9xuhiZt4txPEYIjDLbatMicrRHBuTlG8o56qMtRw\nVdoYlLwVK2lnSFvybSMA4IX4GzNDq2nlKZyKbUmgTzedGNr664er9JJlFAQP\nxNiuJyNbU6MA7ZzxQvJhANOWbOhMSJy+WPqwrZwVR0pdLSNnkk3SE96wfuH5\nM/8V\r\n=zfhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7e4b04b25.0","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7e4b04b25.0_1579646765063_0.3374455194503254","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/slider","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f85f1c582c8ff12f879449d952ca3c16cf996ad","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ebc296937.0.tgz","fileCount":35,"integrity":"sha512-dfitlRdib+NWZbV9plKTQFLMienZuGw42S1hkglOyhi++LPuHSqc4DL8PfvqrowzhoKWSN4Rg2EDbTfQZB2TcA==","signatures":[{"sig":"MEYCIQDBJtJDZKFwD5syBBaDfFD8TWW/FmtlSef1oK0unueK2AIhAIeFuYtayfLEgGRr5Vw3ZRqaAKwozjtwFyykJXcyu+EM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4z/CRA9TVsSAnZWagAAF7kP/iRzjmS069fYg/4qy5fO\ngaHr5Lh4GUDVlGQFH/auGE1VFRVssBDuicy89TY8zy8pngK05TKw1HRnZDHM\nP5yh4lvfZr8MrXksVhSjALoYdLwZ1bSSrJ+yvITtadPv4F17uGN5CbIDhFww\ncr3s+C6ud/qOoitNl3/nGFArLy1G6FUwKUY8nkOnAKc+OfMeSNn+hgCrTl3R\npEQQwRajJ3LkXKjbgwqURjGhtDM2Pvup5gFHVtBmtflZKASj1pcSNPTGSNY7\ncYWKUAWxmbnNiNCY8bBERY9/YH/emzp7LTEogJobZ3dCbzJtHRcDMugvds+I\nJZbUW3E6ttkUf5VGR4nyooMFzX1CnVEodt5vnCtIl5JGmmrdGr7w8b3UjphT\nQOahZZDp1ofMDykCyEnIbOEee+BVP0wqRdz5PJ57MaxWOHns7sfVSGcwwLoA\nAwbpW3vWIXH2+YzVvzZZ5Y2q8X8ssnjC5AKZ/+GvWi9wdVRpYPQ7m6dSwPYH\nb/gMG5SiFHVJs8vNFbCO0v64kU3jaeVGTklBpUohaMnitx09oerM/Fnk2L/f\n8WecNx35zPkPkUMFMpON12DmSJO9n3HJwSAfVlr61GxVLfsqbOxY5L63bVUu\nbehiRSZwqhY+Xk8XKxAXGK3KVz1LDJ83LAnWlBny8FC082wzRZs3N+XQvaxT\nWQ1i\r\n=FYLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ebc296937.0","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ebc296937.0_1579650302418_0.642848605534537","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/slider","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72561b6ed6b7d2ccde445d20695193c80f09dede","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.cf33f113d.0.tgz","fileCount":35,"integrity":"sha512-dsTSud6MemoKbxdgjRJNi2Zpq0aAgq3ZqezI89xgbT9guMntYx9TYprBEuWQBK4gO8YribsYe9mC4N13haVsFQ==","signatures":[{"sig":"MEYCIQDLIBjMnXR5vnL7G3/KjRAzoibxE89RFywEZE6SUDBbGwIhAJhcbh0fshNbi+aGB0dyiG9T1hHzRwBCaR7pvYLgUYyy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PLCRA9TVsSAnZWagAAJcsP/iVcBqXypC8OL8oE0I6k\ncAQtwWB+BAox41ctxQ/R7qqSgdCR8JQijC/MQjHx5yHufIavNxG3Upehilzv\n796Pkdhi5gwQKKrM9HtdtVrOdCUf6M8QwfiREoH7Mvw2qGZ7QIrrK1Rhzu8J\nCHb+YLew+t8UVKm5Sgwq4Q9c32E9qgbpNL79s0ZD93TUFxf/4TuEHo1MUhs6\nKtGBAyQxrcqlf0cvFzZ/tpOHoXAMx5G8Ct8oyUwwBXROWGgQ7dnxWG32QXod\nS37A2LmIDaefHc6t/eREVO9og1RnHlcxBoHs++c+tPFfXCaYJzTkuXSIHEH6\njD4DdwnfIBzrLR5WSJjjZ0lVPJHuuFiHe5GQ0wqhT585QuzXDulGZ7YbAcW/\nJtIuzD5wVH5CNvJn0lKfxje/Q20QQNrn9IZtjE5nLrJ8svc+BYSKdwwKDNUY\nHehoNwgOPU8NP8NNVo6+YWO65Bc+MM2vYzbInM3rDRxoMp0hmc4rCril3Dnf\nTfuIBCiqczkgV9LNujnb/dz+RGRpOh2LUuSvHytBqBfGze6QVUTW4nq27D/F\nVfrIEOqdWvIUHK05meHvoDfJgulL6LshivMhtqvcyyxpR7RESZPrGIwO/o1i\nNTHaeoMCMmKxDeU6AHRlJZr8KXm8qmubQqajFrYJ71xkiMUtUuR6qykrc203\nWXG5\r\n=59CE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cf33f113d.0","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/typography":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.cf33f113d.0_1579656138609_0.4186211611803732","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/slider","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7597cdd7cff9ed379b1347dce994e0cc0af204d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":37,"integrity":"sha512-msup2UZjjXL5Fx4oYM3yiDwxA1/sJZULVqXSx9dcCIXSTeYNpaD9SMe36isrtv8XHmvmzQui2HpA6yFjMV1rgw==","signatures":[{"sig":"MEQCIA+KrhNxNgdgDYCl2ivtKROH2kpuTJTM5aYMU5oSAl+vAiAg7Fy9g8FT7QBsqcgQkYZGvknYXnIqwUYGEkttMiihUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6CCRA9TVsSAnZWagAAyvYQAJJKLgiE83u5ZXfVc0C6\n5BfIlc4TT/7jYuWKLaxXpDXI37+MJvoznrBIQN6ONYIPZgbn1Q2huNMpqO4P\nBaqYAX6ruRlGMCYQzSATFED08Wr309IqjFQKV4sO4hHrTgNBje0nRXfZp7ZE\nRyAgQ1+vhTk0A32eeUTJvuEH2vfTFaTXzeBMo64OrlVR/cTqXMCe/gcUN8S3\nfdu1xxbj5v5zS87yEoHoOoGKFWmmP60Hcl9l/jcCFqysWPPlPHexLmL0Qjq1\n3dAqVBjC3porxG1TK8sRTSNt1uOilgbHmgq3bYlnKfBH+ZHGXil2fi9rcy+o\nY8DXpszzOQHVms6nIrhsaAsYmRmMWCIMiPomuWzASSsC9YRNUOH5+Uxihpsa\n8IL4vS8SqgCPoAIdaLiIDsLv6PzaA6KyUfbvjH6EeNG1KKquwkvgCmsse/ke\nJEsJCjhNdDK9As2cuV08yU1jVvqv0TicJFXCtJizu4LiF9ziahrjfasetEwm\nnk1iIWaMwfIQGPTRzNEAY5Zhb5Z25buDKFgj4vM13buVB5518GMcvxbBY0k/\nKLUKxE7it9njDDWnIJaK0EletYK6pW3toESmm3ilofYx7DhdrI1WHmUPD/pI\nZv3Jkc2e55RuU5g3yyTH7JvvsynIr+HUxIk4LOXn+1ddYd6l4n4aR2f0pt3g\niuvB\r\n=LxCi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e1d5f1be5.0","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/typography":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.e1d5f1be5.0_1579712122868_0.34577224035963305","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/slider","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b5812d3650cbd646895f5734acfa3ed60f35d4e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":37,"integrity":"sha512-aJgmIZpXPpj2NHXzgimJV4hMnwB5Qk9Boi3mT9+gK3MwNxnLWjzsJqYXjkJAaNDbjgl4UUfw9oyZrz5E+oJb/Q==","signatures":[{"sig":"MEYCIQDoA9YAnFpkis10xZOwgPAGY/guamgRkQuPiq/oCJTvoAIhAMreIMfr/kFKi73RLgSHn3FGJ2VSPRpj0dDxE7N0/CJJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0ZCRA9TVsSAnZWagAAhtAP/Rk1lngEUaXp392ml3mm\n1KfeN/dGmU7niSxe5PG4A79+BZ0Jqp/SPwts3/4ZnvROa8AhRZke3DWvsXVl\nnF3j/SzaQPIag+3kx9t3w9jvEFlgBu38jGythnwhbp9djFSyAN5ubkKKcxnM\n0aBmOVvfR0iAQ7tN/KlmWITSxnBs7NExWNoXaqdJyER9ymd8HOlxby846hMC\n2ouKHqF0XHEKk+sBWqZ3oZbkGoeI/as2Rm9FwFctlzGwYCdKdkV0ju6Z2JAB\nFsejt8PY0oXOyE9oNsPDXFhe2qIwJb65n9FY0+bMj0rCXT+8fK2vjxpuQbh/\nIaaZlSUzO9uA0dJSwQFlgiS81HoSuHwghbszPStPAR22OSNR2tna4By41iXS\nBXafKiRL6NBhlmc8gUBdg7BjNAAPKAuGInMbq5OUNP6IcT7RiVWuLAz3NR20\nFaVzYP4GOcgTTZi/NUwZf8SAeYqkPFtPBbv+K7UpLzHPF7m8Y2YE6bgVhhsV\nrIhNpS5kODcJOS20sC3jALHXGfJJ/wImLPP07II7d0Dxej8xbR2kg3q261hi\nUP2jyjpMNooN921us8mrAcBkpvKiSHlO/Qm6RjyfOXx0CkYaLx8CNPVmWTDb\noQ9bnP+vsfW3Uy71BJtvIQuoKFzmVpXm31DH2ryfliOA2QnLS0Muly/j+QkQ\n8+PF\r\n=M9n5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6b6a4ff92.0","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/typography":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.6b6a4ff92.0_1579715864566_0.7870249031427505","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/slider","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b27ef2cc4d3436441512de60724c83dadcb938ef","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.6092f71ee.0.tgz","fileCount":36,"integrity":"sha512-zuPXDKEe12jsTpnlG+b1DtpqYZJeP8tcWFcvuIUJNV7RXHxsRK48HVLP69AMJDrwwAzzwQ+iDbuyiKa6xO4JvA==","signatures":[{"sig":"MEUCIGUzgInqOoj718Is/lUF8iRTIYNRt04cDALU8tSZywdcAiEAhTzhxhw2NpVRUzH7P7wpvI38r1AZKF7XuOZw0td/vzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvFCRA9TVsSAnZWagAA+ZUQAJWk05yIZY7W0DqYjUmq\nINvrs1F9UyBZt1DDO90CD4sdUHei8IgfXo89WBUxOIOhZdprjszP/SQ032eu\n9iTkGX2zcCXqmd9XtnFp8oQq9d7bfLHzfC//tIH/sdhLuzl2x5gtRcV9xx+d\n2rOQLA2x0F2TvTxT5Kjl0CQuJP4dyNSaZCDNqoiGyHUyEG4PQvb4fTPvPkWo\nbZrhisz7zUFQFKctfYSWO2nltKQrP7lroY329dl6RxGsuav1QpP1O9Q0hxVf\nU1z0+XNo99qv/xm6vE5zxfko/iTMUmmOPu8WckarC8eNX06cgeSnP/xWTc91\nMd/oJRHBlYWCsBndgVOleZzdJdF8GdhiGT4A6lwUKRmK/tIkEPwIix9htt1Z\n2IMiI6M+Fx4GTr7BFUSvDe2tYLHPPKnQUgiP/psgue6p1d5vth472GzeNSR6\npjSZ8heHjlrJPxeYS7WQf2pRfRAsaTqeIPzkmukty16K1q3ZeXAQKui8YK+N\nU0ofOHcz/vn/fKhRO6ghmFu+O63U3/DADue2ueT7GalIsmlcEoRjJAbLgpPt\n8CEqi7rdhbEfX7p42thYD8zx8ZEQfhuw78GSkgFq94t29BgoNkreOwXFQmrH\ntKjDHaeZqVapieybLGDfxmZthxanuYDaRiVY2YeVZ+wiBPv7Oo056s/gkjfS\nM385\r\n=9FK5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6092f71ee.0","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/typography":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.6092f71ee.0_1579727812461_0.777555166926289","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/slider","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f60fc9115d77295890f9412821773ee93abd76ca","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d8d95020f.0.tgz","fileCount":36,"integrity":"sha512-dcgHHPOK6/KcKtSCRld4tr8/RuwoZ6tvJ2i1SULhr78BBgKJajsxaLsR6HCdwg6+E96XkXH+rXT968yPCoqMzA==","signatures":[{"sig":"MEYCIQDatbFSDRo3djfyYdYo2j8vnpJ2repeHMErBB0Jgl2hBgIhANQLxIZFN+nVIl066wPrdf1o4NLnwCiJDNgoE4HYDJgq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYmCRA9TVsSAnZWagAA/FcP/iuu7EbAs8Lm5ZUL2irM\n2POeVLSaaZbokogAvUy+bViUhF5vogUI0vMrI4sM6GTz4E+oZ0OTRzuwpmZm\n+vXHzZKwJ7JOGb3JQGBfPArFFOTsGKFpAvKJqnUbymd+xm7E0/e8JZmphn8v\n0e6VDzJjdyHbDCln8LzCbfupeL1qRk8horQN2VDW4Bdzq1/8T37Rw9vg8NVt\nFzk6Sx2XL7v5BYZoBTycD/+ngwBHKFMsSC1sCsfIo06dQRgtqMkW/tNIBEJb\nLpkXO3zvvHyRFnCB+dJoRmKWO2sUf6sfJw8dJTZkE/0rOGmp9k+b9GUGAw9j\nLsyVH+d0WI9cWfXIKCs3CNQ01vwDwCCGWOhSD7YYmG6zj7mOZg/CMKpfZBf4\nuvBwAfDaWEYAR37KtoDTcXMtWMO1vyuUa21oKVeIYriBN6ZP3xmF/9qkLVjF\n6jmC6tETFhM8ifR6SnzPfBZEAIC35mAf/4Iov4uh2ypSOg7mh2iiatOdbL0m\nLlh9f1t+JAIqyh6c77YwA3QrG+RkLJUC4SS4XQKWcirVFpA9FU2mHrdQ3xyR\njHceq9lgdARVRCdqEIhwjZk79z26RLuM/7dSYliKKn4GQp3LNX3bsuluGRFA\nmmrIM4xjvkYh1C+ir6/wZogqYO+q7oe30m/N82tsy+tn8mtUh+bQWOnyvgiR\nOXCd\r\n=59la\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d8d95020f.0","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/typography":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d8d95020f.0_1579734566147_0.037963476398986895","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/slider","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aedb44ead98137028e9d82b783b7a09b1598dafb","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b7facc628.0.tgz","fileCount":36,"integrity":"sha512-dSkPNChkBQkp1IYdD7rjLy7Mj5Mbox1eKanHoE57r9hKSrrwEMhlxOVllsAbxGA9G0A2SsZqXmBwB3H0qgdIoA==","signatures":[{"sig":"MEUCIQCK3+tCMksyZ3T6XOr9LorthyweT2wGvB5p9yVXEqCpzgIgOjd2399cmdPTiNEr9mN9b8DlATMWlrPfYpDFOH2DazY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIZCRA9TVsSAnZWagAAz9YP/3RY9qsKQIArPEQ7kwrl\ncx9ruT7C+3BTR3B27CeWqB7xlEgZFQN+33lc9SarEXNcf9aWoLEJIiNDIlmG\neh9fqUbfCAwvWKjFICodEWOBHSFIu7wTlwfV1jd/xaqFDp56YLXPWQuCbE/N\n4LKhpO//CEYvrbDMH1nogJogkENR5eoO1cj/tUxp+FR2sXvh4xPws887zP3s\n+RLH7K6BCEWcwIX1MAZVo7mXf1mzQeHIfg+dGbTjEyJhpzm7L/Es+ZAS378N\ny9+l7teM4y4fTLv6zLtR9JA4yLnZxg0kxbN+4vGdPEiadj0CbWK8dnGPkumb\nDitZOUkCcWfhMHDCcJfMJRGIA9zhnnsdEdyexM0K/tAXYxLwdCy7zrM+go1A\nFVJqxCpn8kNC8v9zIW4nzowxPFjYOfyWlodcOC6knESF1JuVtfz2a7CCbq+K\nHhvcGzuUdWXZKAeqrnx6UvOrXXII8JHS7OCvDJAulkbxYSdfjjDkugFqndmO\n7+Q+8x4rQ5VjmaZTTdfiwOj8P8I20Wo0RaywkvkY0jlx66ehtbXsQChGsTZf\ntVSAJQLviGAhY18zA55cpHMh2o+EyxcQZa7LC9W8Pv4lg1UKB0lxkQ6fP/rC\nEZHq4vArBPLHmcy2DmVcyB67SEjOTfjOzA6XMxBP4mPhVOM+aFnw5TxObpcs\noYhl\r\n=lU9I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b7facc628.0","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/typography":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b7facc628.0_1579803160526_0.6533043525387099","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/slider","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6420db8e399bc67cb4268789c10436b200c8f8b6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.63f357dbf.0.tgz","fileCount":36,"integrity":"sha512-NQDI+xPr/9Bt1h9TSYPqnnGnrlsBjLN1TOb7805dpZ3EvrdnR8mpr+j64AVn6ni6xiG1zCiDsf/UEfCn9+rLtg==","signatures":[{"sig":"MEUCIQCfgCAagcO0Mj3OzF92yJSBmcx+/w86iviOCraMY3Z+/wIgXiojOwKGcfFFWCS7PqvLWKIMUZcEwahR4P1oeubLRrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZDCRA9TVsSAnZWagAAAC0P/1wsf3EdHb7CKLvnzLuK\nUstAAQE7bBmp7RU+YrlJqRpPpMVV/FHIiKJ+rd1UX42edXeIsQWrA4QSjv2n\nZSRzKFDbynGBrYaZkYcNpJxy7H3mUbstORXXHXi1zD+u7SWq2SgGHXiRLfmZ\nDvTm2r66yIkZf48mlYxwwwfvy6TkJTjPsg9hzFepR4qmcgdGYqWVvlq8eoaN\nq7dSv12DbhizLKKtNjTW6TI3swZG05tvTULAhECr/XQErNesO28mZZUh+cvB\nW4SwtdTAv+DE01mFu24a+tfzymGYWK6UJU3mdJ2VPomeofXPsLZl7GZbXZJM\n1X6TMBcD3RbjJdNzcL2ymiVXuJoiX5fP3Ve5I4TCUgclWdQKk5h222Lnx8VN\nojlYjWwQA+pj33oeTvrXU8wenJOYfyqr0xVLiPDqi1xRd02Fal08nnrwtDIG\nBsejjLWWhbHn3TNUXq6/GAtw6CffD//hODePqXCFIg7QVRpWrVIuXUtkwkxU\npHIRCchCKx3KrsuKpD7NGwlyd9v8eRoBkdydLbbodkQPOn4Ql30VDGOCRvbG\n4TaMAORnouOzyfd4ArL2GHKalccWwV4e523C2GBM6VqXczv9f/NQluQyq4M2\noBX7r+Cd4q+1TdapRa7wA0IH9nQLw8g9a2lzP0cv/R7F/nbEHSE/Kj+mytvl\n4Isl\r\n=0ALH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/typography":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.63f357dbf.0_1579816514680_0.3988455812954568","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/slider","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05abdb234ae9872032f2ed6bbc99cfaad43c6240","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.f2426d26e.0.tgz","fileCount":36,"integrity":"sha512-oIGrKkWXVEAprIvYTSlYVLRhXPZW1hnM02ibLtoyWT5jPbx3G/IvYWvl8dzvPzf5IbgO7Q4sdknGO2xQ0vNgvg==","signatures":[{"sig":"MEQCIAeYQR64vcetHxeVELE1CtWutiwEGDkqe0AB1bnVyR04AiAVaeooktl0Egv9lS23mR+ZieDC6KVI0eHWuCYjraJ42A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJhCRA9TVsSAnZWagAAP0oP/RIuAxb3Bj4rHruka7Wn\nFhamAAtgUmu6pOnWzBzqoqJ/FE7pYfKfqWVbTnH3cftjrfpIpIYkpdu+t8LZ\ngEwCoAOGxpX0ldKcFtn8MB7SmL09Qa3DzJWdql6MJ6IVfWuf++wcsebCZrU7\n3CLiqw5PbuxUVL2s6F4OQAgfeEA7ewrOczhiRwuF6qz6FUKUHgDh16mqOwSq\na/vIdrBqOV56iPcMMcRjOIcY89L9kmuHKHaXNJGy1hFJcGWmuEAWEYL8J3cy\nH8hycKkv2JPKbilkmTdg4MTWJeiPyNMOrTgsz/OFZUa8IsQwLyGBuv0rrySa\nT6SbR7/+vJVFG95lAp5M/ErUjqkMhXMr0iVwhCaSbxpYfZIH5OzNP0Fkp3Vg\n71iuJIBAFW+zgemTmJTGGPIhwccdN5tTBfqm52qyWpo9QyLA/ZBrB9Bqex9i\nITwwU443sRJ6JmtVNUn6bHy9s7Sv5wJ0y3+fiv9kfJsx+VxUhO0wPJQDvTeP\ndsXwGaiQOimz+CR68mVIuwt1o9FORrfnwwo2pfw1OY2w3AVmF17Kis+KTbBL\negrizoA285jHkldo2cxCkJ6Wr8BwwsbJoqMj5mbBDxK3CZQTzi5Cn/U2mGVb\npzexRiTBD2It+mw/Yly4W7Ww5yy+EWovqQCZ1PbDZucnqBLH8nQXp7DIEFVg\niPM9\r\n=bTO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/typography":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.f2426d26e.0_1579823713107_0.6242067007778902","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/slider","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fe67ae787308b8c3a9610528f44c44530a914aa","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":36,"integrity":"sha512-wCw2tHHahelhXPCFOSHortzcCeV/Ra7U96Yql511jt9MZdPWheJp0VfESTQlewwVGRll7PitO+XDTxq7DcIpUg==","signatures":[{"sig":"MEQCICuchtxOPuXunoDyeO8KDx/V+qM5V3zyW+zxGVGSVu24AiA3Hisrxads1a8p4WkVeAfQcaCmusdoFqcjB1SR1Aj/MQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+tCRA9TVsSAnZWagAAF/sP/2UvwBDoizgdVBrs4WGS\nB/B78GYYy5isPWUtgJn1Zlg+GTtYG/5LHaEWaCuZMCimegg0pzMOJ9LKkDaf\nxv41Q2IzkozU75efd5Elb9hlwsgVgT/0G21BEQWGB8qVAKXtt88PakG+wOSx\nzJHFdguWYuE9F2sVCy8x5rzAieoS+SnPLu4tc0J8nc3o1k/90ch7yN+wuwMO\nEqDHdZQGhyU7j22Rc4zSt5V/j4r+vBzAo/ALlI+AqUrHlZad9lee73N/JETc\neZq1sSrZaZso+PyokmTguT4M6TIKS8uRJvHZCZbXehAQ/GNToA6dQ6X2i9FJ\nnRPmol+Dzkhr8k/rIzJmHjrDuVNcCmqnm7ssvNzfy6S6Atv1WmkTot2WUGgI\nqBa1r+hJRnwMp57HyVf3dk7SRSSuLIUc5tDSWY5nNNnP2lcUVTMgsL19Louk\nUpP1wJVkovsux5aSVMc1mLfHCD1Ebw1XcbLW4FOhf8oAgWh0Ln2R7fFzoONO\ncnbK2fXumM3r/zp8FeCou7ueXulEsberpguGklfOGJxbGJlm3Qp8BXETc/fv\nEJ/q0Xlw8MWvN2gcEAVRhjzGRCNxZI6h6NBXgoA8A39qdWVBD+DkCFFPTpiG\nuWA1PUawLlzYB/DnFLqCuI5Slp9Bqj056phnaxINKy/fuI0pze3wqKDz8VjL\nYfzh\r\n=ohi7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/typography":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.7f5e0c23f.0_1579884461141_0.0971286451940856","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/slider","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66d4f0a432a43340465177cb3da6aa8e5d9d8167","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.3fc3ab520.0.tgz","fileCount":36,"integrity":"sha512-0ks4ASOB0tji/az3jMH/fLjMar8xVTgx3hcvBzsPX5e0NoFUHZHxlvEAejML067vijGCtWHZAONIO7xQzRNtRw==","signatures":[{"sig":"MEUCIEOVQujht6Ep+TuJkeUupr7CAINi7tWlLmB7Vsze0e6oAiEAtrEB/43cPw4VMi+fk4jDEFV/M454aBhGMGbDcZH2OD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydvCRA9TVsSAnZWagAABOEP/3mvyX+I10p8KHRS1bB8\nleXcKuvJVJcLGyBbs4u5k7Ay1qL3Ks4FZhztgcIY2lCZIq9Y2JQHAAyFE/CZ\nQSebkw0Zm+xj+G+ktqgK6goBXdCXMZ9axmJVmxToGLQTrgnXxi2DoA53UaX0\nLJBLQPXHNjcbGYO33bQuj3bls8EvQrzbh53a24zoP29yMoq9fHacNZe90Cyx\nOFFiD11TpSbritrBHrOr4VKk+lipTaJ1L2aapG5uWBUGqrKacqrLdA//vkPo\nhfI+6EiH3hpi1PGVbZ8PIAgzgzdltqaGx4fV+V4c9wPWp1mJkyR7LXvW/ZBF\n0ecvLzhw0jFfuAZwa2fPAaxhXovkVIRoocBwn/eo88Vc2nB5vOuDVHpuUEfg\nRXvV9NVOLhKFi/1ItYj0xEgAG0wwIQ70iEMAsWW7+8Y5hEvFMNhdUCSvaido\n+08Rv0GkbEtzZ417/J7Pt2NA5urx7uuQDwr5DXFLwMpIqDZ4iUE/V1aMnVZD\nW3awaF2w2c5gLXfO5yBpxrQSyuF6mEppaNdYcOqbr/7NIHM/rm5cG/0xVgqe\nQXb+WY3VwUWxVeUGtTOd5VyjwywhOAw3e804qIL0YykkIKfqx9YtIiwce5dV\n0e/L5vBa1TEpuCBhKAJMTdBLrNXqZ1q4058H/xcp5ZrTmfLYSsmYRsjAdjXU\nhQvi\r\n=llmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/typography":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.3fc3ab520.0_1579886446809_0.42168884661895545","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/slider","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3457af3c8828d38b6d1cd41a18586aacb6cfc5bf","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.80a4d326f.0.tgz","fileCount":36,"integrity":"sha512-G/3qCMPrNEZ/Q9uNczu7M+WJco+7lBKwYAvOeMsXQHrHZLqOF/iXzG/Eq8A29M1k7DCFwgdL2P+FJ/o8PJDPAg==","signatures":[{"sig":"MEYCIQDE5FVZXm2o0lEI1a9v/7XHNzZSJ1NXO4IkYP947M2sAAIhAKKhGuzC46tN1YHbXzkgHKw39g4bv4/CA9lGpCjWPBun","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1d7CRA9TVsSAnZWagAAkqkP+gO2rAF5eVeiFjO644ZL\nkoKbLbeeKZnTMjvDAzJXok4NXcaH7uPPwAgPWaLdSQjndXwoXTjtCASMRqEp\n4rCtdAh4fBiJMImO+DlxZ9ConGYdL5pCuvfQJ1pf03SwjZEATvFvMl26ZXqC\nQ7mxjMwRHpzpyvovKuWU3zmB6SFLNqtjofy82KXRMilh6bdXWeVYL7Dfl4QY\nEDbyNszIl+3Jl2W8fUO6o9hLlwyiBDhZ2pUTrmsIbn71eyGmaoPKtDPWFyZ5\nEVEnz621vECRx2XCFnFq/sR+O3T5QPtaOmiBh5pwcCb9k8TcrFpdXUwXg9OW\nAotrX+HA/I7hDqnpl787lxiLQ1ZedUpeUGyYuHLTijtbEbHLYAeCZ19S+Ifg\nNCQlcxvGUYcq2DJGtCAZbsU3XqaC2tP286YHI2GgcJ8IfVagwMcAoo1thtCg\nZXWrN4wdv5bEcL50DP/Kxoyxn+2z5hyyDEHKdVaNHU7fK7Iu4BKJI0YMgV8C\nJlbY2fuBal0JcxG93V26YiVM4PKrZKb3K0qPnUffS7eL1lATajAWDOp1yH3I\nAvW6LXHjrF2tfufZ/GxWPiJC4PIj1w/jscy2DPnRNcF+9xJFn7lmIhctjHPN\nVfM9E5B+XaHz0dJPUuKqF90IxBhriKVQAZizaSq0lYQInjCxb2mja+FYFXMO\n7HW9\r\n=VkrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/typography":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.80a4d326f.0_1579898746651_0.9013604995173521","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/slider","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50287a83091328aa9323611544e18f2b8ee1ee9a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ef7de4def.0.tgz","fileCount":36,"integrity":"sha512-oNJfgYgD4rNBPAbZQQgjna08YFg2vSL3srJ6W2BuC/JjuoCpyOyxwBM6kShSzFDs9sCTxuH2tGZicpPeb4vngg==","signatures":[{"sig":"MEUCIQD7tcM9POW0OungSMTkRe3RrHjyzg3nK0cktJb95aKbxgIgbOOA8QTnCnR9CZaj8pe3xERKSoPW3i9ybgdJdHVWfMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JWCRA9TVsSAnZWagAAD0UP/jG0m1Qp8BpE408guSUU\n1flTcCN8tABjCE7VCiwKaur9rh1ukiUEMvi2GS+xCzmDT7A2XIIMhFbNNCNE\nUIUmjWDmwzTWZRNuVrlfDeRY3E4bDwHoUU5dzOruyOiF1bp2ikr753LklfRE\nkDIXibke0EkvcoAHQwHohAAIjXVZxa7iNiPiTtPOO984WgtSm41i13EnyXm+\neWC+G6/gNNst7xFPquCgKo+h/UWxB7Mw//hunaDutNMRY490XHUg/s4rorKT\n8SO2P6f5WnWnPJnRlbVIKhfGM8WQqMy3LCUX/5eJg5w37e0RamHKps18DALA\nn0Gyfiufldawu6Mjtp69FawOW94tZEB+NrchA9OJP0ug9GMFc6r0UJA3WAah\nn51/pPObM2IdtzumlBXiYVCWOS7LfR1fWzQbxbq+BgfXZ9aGHZWQ9HU0+AhK\n10n+a5sabgeg761+UW6gwMUJPy39TiPngzCekpq4aKJ8MqQGh5LThLGrAU0m\nSqjiv8g+dgX2u6tXOz/yLu6eaiys/eYPns17l2sUB3UWMaMa/WafyYDs2+Cs\nERjTYH8YfcV+H/2wbkrljT8ZhBwR/xCFKzL/jxN9WiE1tZsDWZc1FQp3h9y2\nOJPKC1+HLOE0eVtlqcQ92U4Z9j3dtfzB27OsZRIG0+ldad30/p9mNii/WrXu\n5i6D\r\n=cCPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/typography":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ef7de4def.0_1579901525708_0.7776038358919839","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/slider","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eaad74c464e33c6f66d03c0577528cebaf93e39","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.93e2288b6.0.tgz","fileCount":36,"integrity":"sha512-PN94DZ83CMKwXbqokbt+ESQHGHxm/tYOljDu9HHtNgqONREmm9yaj7FeFT780kAN3oNFEpb86AzPtXEjPqIORA==","signatures":[{"sig":"MEUCIEgzl4IEDqpCNJoDGbzIdwgNNKY2NEo23WxJaX0lj7L1AiEAk/pjVLi/O07x3mqGAeXOVDF4ApNtv18yPuzl2ZMOzjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGebCRA9TVsSAnZWagAA4cwQAIWE4or0emtZRoj0V4y+\nz6DewVC3KSGkhQ3nBAFSoJCwDVLITBZnHyLdav+zQAbs8MxSpoVFlxpEbo/B\nHpMY2mzr9WBRLQdTLMvGUd63v6z4lBC4f6aaJzMYXfFY8KjedYnYYZPrkvVw\nitb24N2GV7kZhPitoArrjeC6LHMGqp7QS6cq3VrTH+dqgPKXykk/1B1fazgR\nKPdQ0J2Wd7cXhHRn736gUplINyzFBF8Z7bXwbTgh7Z/ln0/On2OF7Xs5jdk5\nBe01JRuBXqDOrGGEcRXx1vWDv/ZKYxOlTxAD7ifRZTF6Qh70SajliEgAIm9j\n789fWiT9MSbld4dBohPBAgSWwgtAm1G2O2GMPE6pjWXdy/S21YyLFA9MKRTX\n48d7sTmHTbEwCNeFWAgbRbw1W7ZX9D5CuXbc8gQ9L8Gt7yp/sjBl4mmXbgea\ne4H5fCiGf3l+J3hizvbbZivtQNnUPpzxMPzNf/jFoYkaFK99GVUs5ESFE3Ad\nfbU0RLQuSpFAk8Bbb1CpFaYEsMaXFPygKZ+8dShQZE5xjF73m86ocJORAbPg\nCRdxyPU2fMyVYloctTi7Nn7UMdBrFTF5l1ItQcXiqj8W6irl8wl46iw3DkD8\nmdUeRzyRRUT5wxXHuFRLu6aIwr93tis1WCoNuurungeOaLoclKxvuiPSzg63\nEpqN\r\n=C6K4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/typography":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.93e2288b6.0_1580230554784_0.6154925850528434","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/slider","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc0152a5b3557edbce64e5f656463e5cf1fc1cd7","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.34ef15f67.0.tgz","fileCount":36,"integrity":"sha512-TKnXhH2qmFS1+gXqKuSifQEPbnnJB21kLRfLeXynWDPO0GCIJsM8BCaOOU+yhlMwGq4qQBmCsmoNS/JFXbjERA==","signatures":[{"sig":"MEYCIQDKSNBzVQF0QxqK5/r/26p4jshifrVuNNbFYDiGYMpFbwIhAMSDYDu8s/PxZ/rlA2l6hTUU2UGxFeGEG7WTwOdhdQr7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG44CRA9TVsSAnZWagAAYgoP+QEuGTC/+Swp1hRtgiHa\n+RgVDCfDwdAcjD7IuxtUA6PP32rPwtsNwkQQbsSOJq3iDeZmke0GkC4aDys5\n55iMJoEmEjkMI0IPsFqXKWBsb3vb2xa5LPj8PfvyFqKOhOqzSeo2enc1Q3Jy\nazyTx1wOMhAuBwpcxwQOFWEm63R4QX1gZw0UujOW37SJbVK4c9SewdnDBZ28\nf9zeDzTvaKH0+pqrNE9YgvFC2G22Iqt9DaNrDgJrXjcVGwxfMNGFhaDfLy/W\nx/mW7z5LohgOWImXe+crXosO2K8hJ3ndRUsfYOYB5P76aUbdzk3vHRfOjTRC\n+uHsV43/90aL+r5MCG5IpBMUmvxN/cwnIH+OMrlpWoQStWXCgLrybtLhPb5q\n0xz/Hn83TGr5+0na4JRHmvXnvZHwkZEVskn8TN2GkyOFre1r/WW8PE9dVjAX\n1O9A5zTgPHQyS5J0pjGN0zluUETenWIUqBoaHDMHIis6bA7IKnNmG34XWBZQ\nw55ePyZQYnuavL7bv8otIDxdlbL1imae9hDFN1rBn8FxWRNNcd5gab54gSMS\nFVZR9Y+dxltGBBudiuPOlbcgbb/RMG4JBUc2cPvn9tue0tO/vZE1s+1nazLG\n7WEZ7e6r+5BkIR+R2QHF+k0qOq3HLPOwjBiwPdI8y6TrxHRcOk8KLeDpBLkd\n+wIo\r\n=q8KC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/typography":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.34ef15f67.0_1580232248333_0.9614448310945372","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/slider","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9b921be2dead0c5fe650dcd3e0adc8c6c4979a0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d3d176ba5.0.tgz","fileCount":36,"integrity":"sha512-0xsbe/3HbvoIYHfxYNW1LyxJjivDJ4tkc9TDTqGyPad8d3QV0d+EPBEd0Z5gQbNL7gWbPfJ0w+FXBzqe8M9b+Q==","signatures":[{"sig":"MEUCIQDBPoq0Ru4FKE2DOVSUyW0CPmcfoCe7o3hEOkmgoHBj7QIgXY5GkVGlGxavzbUmVEh4T8PIB/qA7xtHokSjTOBqFSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9zCRA9TVsSAnZWagAAP/8P/0bnXmSXytB+lN2Uj8qZ\n/p3H9nJAkViAKk2kEW4umyWpGEGU11uLpRfzhLnEPgauz/YaWyfbKiuAKNJ9\nvmGLsQeGxV6+wHZnyBpiumsrTYyhH0+WPLYN3KTjNvzzB/1d3BWFBxsGZ1hy\n7uGhLnOdNClGdEY9KWwm65O4VpoGpZEy5djPu8LSc7kHKx11ptPCJPeFkS17\n/cpfpgoLU47eOYvSv7PQ1RWIOlu5ag7Mhl4fyAEB+9b1tSsNhM6d2ESl4P8F\nvy9H0h8FTUGM9zUKaNzahUkRZAoEaD9P/MT467Oe3pnbZi8su5bZoFpgPERd\nL8zaX6e7qhA1CvLg0gLyWp6HPxK+G4LrSBkLixHmPxkmmgsJWPbhuNQWHPgx\nppTzvh7u5q/99HOvFqALkHo5ZYQ1EOxN3Rww1cRrwYj9k2I2x8UOKKpY08Ma\nl+yuF/1TjFviAo9Sf1CGGYLGwbcLWqz9v10AhkcOGNVxuZEE1sFZtnnHjP34\n7vA3wuDYQ5FJa+1t65bsk6LE9SQCnTcuxdEpo8ubE1f1lLCmkVr85jVsU+6I\nNQmbF5MQhE7uzmczoddgDA1QsYr0udw8f8uHS/VRDKcHrUT6hipHI04fTBUD\nf7tKo9vvAo9IpaHqLuuGK4qfjOjMCuJ2HwjlwJHuIOZRdo4p/lO8xxeJ73u1\nrJwp\r\n=KOiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/typography":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d3d176ba5.0_1580232562513_0.11175514059107394","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/slider","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d83e9f9ef930be288b686c28b30f3a2f83202f1d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.32c1df133.0.tgz","fileCount":36,"integrity":"sha512-ueObS25O/SuIXf8rCCcEEONqNHmCNfo30pCAiDb0t5G+BUjDjufg2tCPDRaFm6w55YqAQv7VKHu6pywOpb2XMQ==","signatures":[{"sig":"MEUCIAOz0krvzqe/MPIu/UZJDA3CHLQgMs4F0fh4igh1oXRWAiEAtsy+oOjcdbvm4A63zgbmavhoSxCW4SbbYQvQpoYiepc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7XCRA9TVsSAnZWagAA7ycP/2WKauF2kJ4wkWZdE6Sj\ngkRUAU1YMXGBbt4VTmBJQdZLkrPR9BIjFWuNs/9MTCN3YJyjO+eZDAFQDjwr\nnp4n1xptGXcIvscYV53ch/i8AvXb3VCF/v8W7DLVIIF7VX/0ko2aBNpmJzh0\nd0AG6cbs/7593GY/Omw99O9WYv+Aqu1B78LtN54skAKVX9ZTXUp5wGXPaqKp\nLdazN4TgUfpA+n7YGeB5s8nIdQz2+06r7sPAc9tMBpqgAio+PnWN1Ho1Fc15\nxO9hcg4eF50bNIfrCGVQNABx6gXCtenihm3yYcOeLbfH2DuYo4GQ8KLr1h7H\nweMBZE6kVwmmpDhED09ndBvAgzTrER3vct1iiWMHj+MymkqLvZYJnOwKzZYw\nD9EfJggJQ0Y9Wn0Ein5Rewfz7iAAciSoIoOcV0YUdfvOuZT8FH9EjaTDhBNq\n0fcuyNWW4CsJgZs+x5OIedA6/Ia2PpGrdC/MdzmgqMoe569VoPFPZCFvfwal\nWVnSZKgt+BhFf8+fRwZKxCF3/pd03kg2UYnjV8AJpLS/RkbjtKtSfCLCHV1L\nIxfVAQD1DxJ3u5Oc4HUFxCnV2HAoBOU/3FfaES1Ig613jbDTseMcg2CD8Ug1\nyUKYGMmVAPS3TUr7l6CStWFZMuFDevaKtcVHqWvfeZlEHKzhaBy4j8Y3TbpN\noynj\r\n=PgP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/typography":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.32c1df133.0_1580240599230_0.8908874158596762","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/slider","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c4d8cf364ba73f4f3ab7220f88d5d8a9cc6e8a0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.f3adce86f.0.tgz","fileCount":36,"integrity":"sha512-O9UGWjCkJfuTnDWSKgxxvCrtGnaN3DY+iOfo6yYMkQ+pILXV833RrBJuL5OnIbo7X+3xVdj0YWciU5O91UJymg==","signatures":[{"sig":"MEYCIQDO0n1ObQjKtOF2LIy3qmTjiF6PyN/zx/kutJuJKSWtLAIhALCw5zIZQORYdZQ/4/vVoaxbSOzbRF+a5ueGl+Zi0lfY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxMCRA9TVsSAnZWagAA3RUP/3mhf3Eoa+0yRgyHZK/C\nXpfBf2Dm7kmk0hdKUAyuZj0A0QiLJa8yUP52RzbbNgfry4bjLu44XIPB0vRJ\nKQjG0lq80omX1WJGO/1fctbdKu8dk1/LUElwKxPLrVIAq9L/NnljktREOYlx\nWbPEfu1zU8ext7erBtmXxIv947fN6h+K6rUbucac+JP0M47GroVXI5aXr5uZ\neqcOXQHuGTve7cNHcEQPylpVCcLSoDrYFj1UZyW/DAm/nMEs+Dmd/B+HO7C2\nRECvRzKmD689jMKWtoKyLE2+3TYjrQfQFhJR2oySlPnVguM+36B6+GyoYQic\nIXow7B+GA45hEeCby8fqiOhgLICSICWPfsUSpgMLHbho1xSSi/THRnOqF4x2\n8Pu5FQRxMo1XQrvUS2qjkZL5maQKLf1C+TSOIXaPSWfEyFbwEVMVF/tjGwP/\nNegtl804mBA4yNN2lJwETY8S40ec0BT3UdKGUpU8k0aeuSQmtE19iY/eVEcl\nsV15KX8bc+MBo+JdGVF/Vpfxp3fo7Gj5Dbrut2Tcal7Ju9QR427U/vbCME8M\nYQsQE9WR/cQA6L3e/+KT24MMpjWLeyL2T//IXQ03QGP1s0A8ZFU6DuMfveOO\nFTO2Tha+H1bPg612zbxzNvDuT5/tsF2KvIOfI1ZelrnjftEYrnSUTeOxpNTF\nYNwT\r\n=SM3S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/typography":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.f3adce86f.0_1580248140128_0.8466838586612884","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/slider","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"478aab11f9a08cbd20b3eec98bbd175c4a3fa099","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a4423f890.0.tgz","fileCount":36,"integrity":"sha512-UpdQ6S2EFTY3obv83g2Y8SRVBig1BkDPxYNk/rNFnMXKE+toCfjnd4ZA64I12Se+t+n1NPtECSNl7VRckC1Ing==","signatures":[{"sig":"MEQCIF0a/xE2zpjf3YEDcCvFbFjACsy2TuAZUAeQ97jYw0ghAiBs+vognsjUJoEFRF9MfEAhOS2Ys4Lz6k5NOGtpyqeIOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSMCRA9TVsSAnZWagAAcHYP/RnfZrwVQDthvPZG1N6m\nijtA8eK2B5Ud/TjoBL49SrgnOcCnscKmvmglRSaNm7x9UIPgJz9zyLev3A+g\n8IwhYne5Eg7nzRwHKznf59svHpOIl2syNBeRcJBG237xkFs+bN7iHL90k+UE\ntLlmYWQam+Im9E3Fm35vAms+YqxWjinyPu9J1eIE3WcfvVJTOY8bgsLSLLm0\n3/fyWSxuXmIodhU/lUHSiLhFHOWbJk70i4OCFxLPxXbl7mOb2V0WORcA0gOk\nIDYznilb/NcqxvMAmZCN6+RVdYrZH39sdBpIPcwmKQ8iBMI3tjeYqcmrbw9J\nXuRlSkbdcpxkoGizXbtOp2I3gzU8THnzM1WJxNF4aO70+0HXPSNy7D1f/H4U\nvDmL4XXp0NNrOez0gWVUQrqSVy+0E1gXNad1sY0x8THcnZKZD67ggNKyLyWI\nZ+zzMpLer671Pm/1oxJPxL5ZnDUn84o8w3HDhyFWg6SifKeqatcFWWQpcAjA\nTWWyZ3Xy3Bz37IsqlaFRaL/2uHELwEshumdsp2JBXxLWCRKNQWRJMYxKuc9b\nB9vOn3Xi8OS3roEYqHqg03a8SeviVBTfIsvMy85i0JIOf2UFPtevLmiI8SZf\nZnsITahneW6UdXFgSL3SsBFH9DFV6Pyp4s8AyWkb6JQK1DgMmni6GpZDK3XM\nZJCF\r\n=Vuts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/typography":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a4423f890.0_1580332171559_0.8586539389024341","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/slider","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d2e30ee75cbb0fcc222640e7d72adc27399be24","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.9351f167d.0.tgz","fileCount":36,"integrity":"sha512-RVELScq8y8Ozaoap9EtCXa1co88zB6AKzseWDbSojYwZcGSTy3lrDgDOgXyzJbMKfnhvgch6p+t1kuq06SpHmA==","signatures":[{"sig":"MEYCIQCNBHoxsmBdrZBnho1C7Ks13yYhw67N02D+xcvbCMmTigIhAJAVhbCSXtDwvo+r6sj5lYiztD+84/dD3TQyScv8Vc4R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9YCRA9TVsSAnZWagAANo0P/38fYqSb9tIMBz1cEZ1p\nWD4z059xXds7/Az83YE/uok2RF8ancvzBGC+hzKLlcTmYO2MN6qwV/QFT7vG\nPHRGzh3k4gO95bj6z97FjgcwhygqxafiYHRT63x+rdlEiyLXOT80ukYhrRNW\n/4X7VrwpVHr7beWIpVkxf8vASsd8FCPacvlHj7kAejix5g0X6+gWap+U1zux\ncly+4SEV31yj/KvpFxHKt342Gy0uVos6ClL0XshT08n1DjpzKWk4WN00hdcH\nY4JzVokkZUEdBTzXGF14WMjt2TAUvBh4nh4XWctzkFgNKZ6JzVQWztHE3klk\nD4XGWMOBAvJqw5B5NonKGMnn1seIZv7wEgOxlSj2FhfumAI+vtbAweTpdf/g\nw43XpJ0JX1KrXQ8pBWABaYDYRFZgeAVjyfOUCbHCIsEj8TAgVYS/PoEI4J3D\njL7q3GeyLHPtLi4/AJnTHyqWK21DQkZMpAr2tt55k0/21W29w19PrDp/S1qH\n1DKvJj4FMCcuHN1oJ8LuGwG9r/zNq+VwRyDfAmUC6IT1enceg53J4Dnm+Uml\nznELgg7LMT/407qoDJHEJTpwFkVpJjrwysjmHeTMhqymjTRkE7FGdGKOkUwi\nhAKGmJmWHtyZ2QVGaHpTlBzAylosFW+FGJOFXLqHP9wwuPeexR1XVxh9hMPA\nKMOj\r\n=s7I0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/typography":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.9351f167d.0_1580334936448_0.6292053507413162","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/slider","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eeacbab72a5a2b762f098aa3ed0368413af0f37","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.29b89dbc1.0.tgz","fileCount":36,"integrity":"sha512-SmI5Izp2g3mrQ7QXpaELPCJHdRCG1n70zb22vGRRmPhETb0TJjP/rzXhgczzSy/ZfEwH98TaMPrwHpz6nD2V1w==","signatures":[{"sig":"MEQCIHAwwXzZRNviJ4TtQvV/0e4mQD/3uvKZkUfTYeX000/BAiBzO9oLAH3f1u4elIKI1E+MKeGNityNm8OfRnOUt8wznw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRMCRA9TVsSAnZWagAAzvEP/im4CIM2/2OSFypXxIg0\n+9QW09Eeu2HYji4JGV64jAKxgmSfXos+xcXyXMZS5+TWGblVNJsR/Vo9KMzN\nWA8rbSvI5/3zCahKGa0xKRMv9Egke0qgdLXMyMnvxczK0icay1SsKLKr4/ur\nAKshB3LmKXXVLVnfCoKXlQs2osFsQbpHA8gJHWOR3K6ZZLxEFb3M/5l485fR\nNqjIUHklqYtlItW02JtBuNt9J/MYufKXSz+pkGlP0aineCQ4WT01e9o/lyYp\nwnTrHGrVeBp5QAtY56+SyJ5cBiwfQhS5j/tERIv7zol7WlLZ+2DBf1cwIPQr\n2kZwJpWoyMr1Fcm3KuZxw0Yxv3GouYFHnbKhm4YEHPq5/CSQGEt0RZLZwDy4\nO9zmeN07lbEUF2amNpOuPcl52lrHLBSdFuiyckg3jprFrACGNqDeifIBivY7\ne4W1W9f8wuSE6dVQbMkvBHItoxINo5T72l3Xv33fQ2tg1n7VwOxnmN3AaiJ8\nXj/bxamqae++fITMaRnnR3gpyskN1kCicjRe8bF64jl0h1uO7FpuFXSFc1dc\ni/O+M2dCMEuwCP/BJ5+xn/9VR2kyhTeG6hvor50VA/joII2TynAHt2jaHMB7\nGdTM3pAp8VZD1CwHpuRgzek6Jwh3jf2qEDS3tkENYSI1FosuhT8zF01bb4ar\nZcmP\r\n=thzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/typography":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.29b89dbc1.0_1580336204316_0.7697848676863477","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/slider","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8084b70f73fd79c2363ed7494325a9b25d8d2fe0","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.45985457b.0.tgz","fileCount":36,"integrity":"sha512-jQbN6zuy+tcJAme0TwFwW6bF6JKH5wMNL6ByuPNcJWe5TSKpXbKp2Z+nv1jDy26SN+iLt8OW33sKQjtUohiZsQ==","signatures":[{"sig":"MEQCIBT+Wdk9OP4CJZH8Kupyrv++BLWQnGrUxOPmgpu3cIBxAiBDeSeKKV7TCzopzt1p9FgCCtLL7nJA9gHl2g4RRH2vhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYoCRA9TVsSAnZWagAAxPgP/2k86P5fL72yqQ/XHmLN\nClAdnPFBh5Sb1PSwskKJgx9qfoXCWnKEON5ZNzUZoXtDgp4UfShgvbaWKt7U\nLxdp+y0Jnjm+/UFKSn8DaV+2Kk1IqimaKLks1cwBCwxLi3IlFk//3zUwdduA\neu1VZR5YgwMK3SxBfXjbdd0JgfQixNvhovrFUyvwiFFKgQ4It5DrCDgUofEb\nDBVbfDgzkGVCKb9V8/E7OSfCEE5FJfOIaxitKPBIaq2/KF2U+xthuus9esWJ\nQS/oi3/IgUDy1B/SzapizgCsDjq3UV8VpXOcq7IJvzWgqqnjf+H6mEWqFmes\nYlsmvmWOcEF+STUkW4ZpWJ+wRubk94qO2acC+CsZd1w9SSZzq3QOjAelLUsi\nTPgg5QID/OzlKUuGM4JI6BoFMeYjUP6mQBuVIV1qxQBZMpWlXRuF3+wW8T0i\n9GsRAlHnERcBYf5n/dqZDpFoHTV9d2GtOe5ClHWt6ljo/uNSGIqQj6i+g0FN\naCXjqO8n58LoAAnVmOdX5WWNK3lukzeL7nA43q4npNHKDLDO88kq0+HeR5B/\nN/OFsMt31/vVf8Y2FxIwAxLfgw3X9HoCHkditRXelmyFwN8xEcSuwq7BWZmG\nZagjudh8dcxd8ggrG4Y014lPaZsKHVvNeg9PKx0CQXg95kRmwsXCa8ZooiOz\nXCMl\r\n=Bl0u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/typography":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.45985457b.0_1580340774769_0.6127822352918937","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/slider","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5352ce0e6f86f11d342478d0ed3baf80796a6c8c","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":36,"integrity":"sha512-kpqTaaKMZRn9o1C9FDgL/LgxdFYin0uGe/vWwJF2GQJ2g2Unsi4wT94I4SyJrhIXzj3ZzIj+xNJSRdLi7Xi1/g==","signatures":[{"sig":"MEYCIQCdsNf9LUyJmKaxJwhH7Yvu6NFE7h7DAwrlDn+Vp5UQ9AIhAOp5zOJF2/dmyRiUluPeD4ua8K8pkY3uhrtszmoAnw4i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354161,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRICRA9TVsSAnZWagAAQ3kQAJau4Vyvu43VlBTbkkvN\nNQ1dF/e4eafPVS5HFSVjOujs7SOyPSFGV1c1jYK1J5HD4UkBV5y1axiLf2Lw\nnw5JAaEphzNrEmoGB8ReovJNQWgKuNr/8ynb5WqvFvvbdVm8dxkaZcqhI/Tk\npgjp24fCb6TakzXgKFtXMH6m+OGUB+Lw5qqe+ZXUeVHICsGE/UQwawtUE3NJ\nDHdbBlaefZKB5oNNzWF3GSTAxqcwqxxvULz5oLRPZNWOp71lJGMWMyHP2/pm\nctv3Jutbga8Wg482PA7ruWwtNwyTMuMaBJxjvRNz7Fey7FAjo88KW3KSJRNF\nrO4bHHzqbLj8UDMf88vyPJ6nBJ0yI3g8erN52RnLKhEC2xDc5ub0d4e+SLgk\nX30UtBkB5+9+euUkmXjylJ34x/dtDxUizjOUB5J3gbT/hdJZ4CHdQmRwnLOz\n35GelryIaf2Y71KnRK2toIq0gMCesdeInQxvuKiZ/bF3D8h/ZmuuhveS6UK1\nkx3TkrTK+/RunG4Fx3E1qWbBl7RFS9/NQG3xlersr+CfL3NngyxP0NQz+OxE\nmAI9VDndqJ08K1e4v1DLJS/EGy3mUCTXkaniUnqqGdQGiSLlk0+u1fiMVVl2\nFcMBB7+l4qlMWlNalt8dcV05s2RQzGNiRo3zfwqKLPlyu1tRWAs69RWlgat2\nkxmU\r\n=0JUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/typography":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.a1a0deb3e.0_1580405831707_0.9523629736238939","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/slider","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cf295cc07d703b1de02daef0f6755fd7f4580e6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.181486643.0.tgz","fileCount":37,"integrity":"sha512-hmPptofbjpTK2meUw08G7zTzqDvuAGU6CMYqg8M13UHSFl0mbgqAZ/yGGdrtSf5/j5024wVZ58f3L6nVM3Jr3A==","signatures":[{"sig":"MEQCIEGzZNAix7+lG+QVieg8y3REt2baBGZ0iIAmj9jD+LqJAiBnvThENtqC9Nxth9+VUQdTRbL7/FuOuZztVgEIHi9y+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LuCRA9TVsSAnZWagAA0DQP/3LDe5A0x+S4sEnWu3ss\nc3LYRECG3XkPhVCFAV9q5eQL5NKmpNhBm8QnFVgrkxeLI4ZmBIxkVz/Re//X\nnmxcaNPuHb5eSfeSwvsyT2SEYuKWQq0tO6uYyvFmRp97K++jw/0Z2Tt9iFs0\nWlblNmdJA8k9HSHYSG2qB6RZ/1475FTTgvYmr9WfHVfG7GpxokFX/W+CsEDd\nOLyNUnxx+MM/HhNBg8guEc08PG86/z8dwT7o/6GphZgv+gO2hFAFDs+lWgOm\neAlwEWohiCyHjo0LjXOLf2+gY/UfbND/PYtmmUVpCpAAstgamkvs+VLO3ec9\nRyY7dHoUmAZQialTkOymTPsU7SI8nYOtkRo28m3sHHXYoIfezOhwmdVU1dBY\nc5T1Pgy6YBU4JP0kf7PSYAFjVH7QeDLp2dfxc1+OeJLTRLTZ9u86qagJNRKd\n+E8nxAMPHPNA8p1Qj5SjJYYOkhASqqPo9sseRRI3ZtWWHgaqJpj2ThVmm6dq\nsEdoP8A7WsHjwezoiLMV1p0FIffYcF78ahaqaES2tz0LgJBCZl3KXzNcQC0X\nPQW2nJvJZpxLkNAPHIXgjicnlle1Qh2Py8sIsimxiaxR8v/BrbWL1moggtuc\nDtxQ1hJHG/P0jbMxzXIUUIzgRkqoLNhieWbLsAgU9cgCtxXPlmOLN/LPcqrb\nB5am\r\n=1WJ2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/typography":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.181486643.0_1580417773953_0.7421224463450065","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/slider","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"733124d579c218c7f3cc3b89360622bab87a0870","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.3a85313ac.0.tgz","fileCount":37,"integrity":"sha512-+mSmNaScCNhuV80SXvbaFilc2UL6xldWaQle/MvDz4ZnPGTVJI/nv16hWpVTy4qb9oYDdUqqqqrwJzzDNK8czg==","signatures":[{"sig":"MEQCIAzwonIiJwnGGD+E+d20YBFMt+EO3RCwB6jYNg8vMNFtAiBZXHS7+o/RZ7edBOoNNzt2X5CDo8v/LUGhd9Z1GvoQLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRqCRA9TVsSAnZWagAA1Q4P/3RzMmAYPlQ4NVYiakjH\nphOFGadyqIaJemIpftC9yMe9fF1htJvIbbkeH2oyPL3PTiHbSwCH8QSV4tn2\nBoqhZl+1g+u46S3RORGZgufJE0730um70gulzpNsvJUJxgkQDsKERga8DNyK\nRLuE8BY/naiReNsUekDvV82RBFMmw4wcMXcBnx/+pQffCJgSLxm/pb+y8goo\nh41sQglhPbYCrOmMBc89XwbjWOhqtuo8sRwC6wniTk5chn+qtG9aIpr4zolJ\n+7093+fO4KVQAidRRH/hkwn/1vuIjHrr3lLx8agUS0BIhYn9XyLVh6Oq1Y1J\n4VLKaWJaFeD7Gfl/BaNNMgtTdrWVueMPYR+T/lFcU01O/1FaYGYRfJhQkqLx\n1PXQ4Y1vHrGv9T5DNlVfZFplhzgJqDrCccLmRGbTPeQJ+hSRpe421oKBxNkA\nfLahPFqjXQWz1CUL70w4jwt89wCpCoeM3lxpVvU7dznYANYhPqheloWqETVL\nI091r834nb76UOFu8DDBSw9+f0kOlmnSF8Q0Modba91YIX5VVlw/qUB72VRw\nqupQNUaB+Y0bC5bGLHg6z6Kti/VZNryVHHWnijN5CF0zjXOstFtN0/ZfBask\nU9kSNDhhDRzveJ08E1DuBsX5uXjBoUaLD9ORWcvSu18aIwQ1MWhdbQE1wvJy\nKl+p\r\n=Zqqw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/typography":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.3a85313ac.0_1580487786318_0.06473765124263053","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/slider","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c105c97dc93e824079965873ecdc342a04329e0a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b6c7f624b.0.tgz","fileCount":37,"integrity":"sha512-PH2Xkhi/B4MUiWaP4gyXApPyqcwiY+7WVn3kYxXXLxEzMhyj5sD9z/DnX2/rW6SLJ39qVxRaJEi/Km1Ah3d7XQ==","signatures":[{"sig":"MEUCIGq8V2ArW7h5InaW1mkqi2TA/P/mXfWPDnDf6/6mnwdmAiEAhBiQZyuq39Ic5VD7MOD9SUxcrXRhUVAi+LfHSLBowpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3FCRA9TVsSAnZWagAAV4gP/28f5Fm5SD9F6ISdLQMH\nmwQwQP9NM72u1qHSw73YlnAoAszv/ywf3cnIJEdkp3417AI4MvVvV53DtVxX\nVd79FNNvuwGqQgHK/JfttuwdCNDcZpfEgYUbh4CKZ8c2eIhAn9Z81k+ut7SZ\nIuzR0JbiG43r691eyrLL6NCd3P5YfPH6MQrhdV6MfzReeqGy2KTwv/gAC/Vm\nwcYOeDiGj6RKcS1fMmSjYdn+7O7AvhdN/WFhSZC3qrDmr/UOY5tPflH7K/2v\nnzxRK9B5mS1sfiy8A+2i+dCBn9ia8qQ7xZ4V8AR5XuqnKA5teiAB81wneAt9\nZPo5AgezHhkRBKUrEMAWhlqHHOS6rEtyhdJytpn6iJ1NUfREWO3UR+N20P/8\nI7R1OpTaX2fXr4CuqeXyc9edIv6w6jrjuuVkvZfPQGjS/Pp2WxsAXFB7Ii3Q\nMdmvRyZcKZ/4A8C9KAjWI0tnHfzqSulB1IOxABkoZaS50Tycc8JF9D/5z5ga\nw8VAs4rqoPat68U8YEBZqbwefka/dYNwZdm0HmpbtD/oNVNzLsqDagCHQi37\nlWkjYZ4aNIfBkakPKG0Qc0R/gbUn03YSjzG/TU8IdEAFfsq2N6Gp+h8vleSm\npEGpKVdLaFKnBJsz8c3v8yhg23I+CCZwLUzVoZZfWVAikjKT/pxt1CUgW1jz\n19LC\r\n=PwtX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/typography":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b6c7f624b.0_1580490180655_0.4711620887753454","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/slider","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31074241f67303492d77980c07b6388825224614","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b3f70ebde.0.tgz","fileCount":37,"integrity":"sha512-IPuIhOmAOOTWooMhAb+MUvJj91h2I1+8aJpZbIj5yUAI7HtOuH4yJQeysvEaM6sku/zlkh/+0AntiOuExsPT4g==","signatures":[{"sig":"MEYCIQClDSe/vUWMMe29Tnr03Ew5I6sBAv43WFR1FVLhhKnwhwIhAKZv1Y3H/hGaKJ7gMBoyv18K++jLi744F7saJYzvIYVj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImkCRA9TVsSAnZWagAAAmgP/1ZPT90DRYevmVAOulO9\nA3aqbhgtSWSHXxfddRjazmm+skirPnDBXhWaK6IjKUxtPg/AU2yn1zKekrqo\nNEUslNIPlhzNuGMQGFgPk1xnLZDMGV49TB7O/uXTRN3amHRk1uVS7A1R1Svi\neaW8f0GFJm/cjgLaBfiIAAoNPEgDYj2HQD0GGlYNrzTvmWYNrxxVgcviGwzn\nEOWvRwQ2ITO922Tk7++/xM/CcBx6YWBFfh0v+a8kVtcRbGs2ySavE0yK+T6Q\nd7wX9tqWTuLCqXrMhQb/pouZq9KOGMqFGg0tA2JT85TL3mgcXfIH6W+ryO2t\nBvjxPyykkzl2/AhCfNInaCv2fpHz7d7rakp7Y+/YVCSChTUUG18BhgMkOL8G\nGghEXzjudGxDo0E4AHFtXSVoasjB6tioivRNruV/luYyl2i8SID6A4kEWrh3\niXd95mJhTIaIoPDrBmYxo3wr0AEYbL0eTv/9w27nOlOgr6Bgx0Ah/hVph9z6\noa61bIbGzJc3SneFD2/dhfuigjki55lBvG1hv8wrU3kD9y2lYPlzbCpTdKyo\n0KMa+Xq0p78H/QerUJ9NRKTqONtu+jzS1Fc/Qg8VVVaeXnRUlYyu4a8PDsBy\n3iP5vA6RJoc+bv0golZDYmXs3Df3mhdqKFsrpY/LnrRJ4UKYrHHX3MCjN+uX\ny+kB\r\n=byMV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/typography":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b3f70ebde.0_1580501412061_0.9386605897085656","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/slider","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bee32d3e904e009a50af73e5fe3704e3aaccb0a4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.3e782d8f8.0.tgz","fileCount":37,"integrity":"sha512-DQdeWwt0BHbZmXBmQBrdnN9xP3oEPAG1CHNeSndUXdMH/gHm6WLauvAMqoPuNuPqCP9HEqAqcXyxPlUS3H3YaQ==","signatures":[{"sig":"MEUCIFjjscHYWFVrR2KKd9gBkf3Oqr1xjSHwroVhILY7D5DbAiEAxUogvCPB0bU+T9GqUONdbCGpsEZyrbVT0/PZCpj7C8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIGCRA9TVsSAnZWagAAhDoQAJqIemmRLPXnreZIoQPa\nZQVcRUDDveMabF4IuA26PQIu8tTKV7RLh3P89GKolLp8vmqAryTuw82BzRch\ne3KGc2ehwHmAcl+O2HsXuwClMH1jb7DA4NmTY5qaLtnHigbWqMDgWyOWj7Qt\niyGNTC1nQfNzYNk/76Ggn7Qx203nVDbb2Rf+K4pYgHXoUXje1XVHJdQg6bob\nXoxg4eSY5u0dwkYFTbvsP4xkj8Nq3zY7YTdx/2s5zkfroi1S+itdZM1T6NyP\nfEg3V5oVlC81zUT34aYhVMRHwYN/Tb3m2oq/MKpb1jvH6kVf8vKJQGhbCsm2\nqfhdcx5nuK3zdLUXIXbGMW/68Gb4JEdHBqfC7ebnFssef1LzNIgdBV4X6u5R\ngPtC7fuv8RdAHbP3GYtfoDd6l/3rck1faDhpui5HpSGqTjip4eGqFsqY2y/C\nc/LwJoe4iMbxnUkZPTYsr7AyNc0MsosVktnO06nicLdj5XfVeFzViXm+r50Y\nP8IPhBD/NZeXuGP0rIauv9nkuxYMNvpUMlmbXpDL5JoSjY6RzchMO6YsxGaN\nshU5TDGWLyNWwlGBiGZBhptDBFDSCTEga4d1WovKFvgmKMm20GfDIIN8cL04\nRdMfeOZLzN900C7Nm8iKx1UPzqUop6JX6DHeORIxN1rEkkn00tYe91PGVYHE\nNjgX\r\n=7FKs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/typography":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.3e782d8f8.0_1580605958503_0.3726445654926782","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/slider","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb6f07a609f223d59b264e62f6000fb6be17657b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.535398572.0.tgz","fileCount":37,"integrity":"sha512-u5WOi5iDLmlO9OiNbJFWJ6OfohwBMP2F16MHctH4wsMn3YqGw1aGKpbYTm9Kh+Ni9IGAUCTO4hRjRSxXdoBjjQ==","signatures":[{"sig":"MEUCIQDlaj/2hFsYGmeMUdw/wi7Jgh6janW7yv3jYicMHJVSxgIgTmpBPSEl1LSE2906alg89ivGJHIFbLysm8nf+xLvBw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJnCRA9TVsSAnZWagAAhOEQAKBtrOGCTUAZAkHagZuP\niLfeiAwLc1OJJWX070H2LZYxdPmMtKgU/qwImQWVFglATzxNvAz0a8HCkzMK\nHOlZD6ml8/LF9uB28zEg1fVFy0WAxAOC8/W8iWCPaYDsRqcgj/jQUnxHSI6V\np7TjHrKSLwm7LspsfYWeDnNwJYQS+UkolSCxZjAIrdx0tZOCJNPJViuB+JK4\nj14SiEqrVI1Rlz+qLBVcifiWYMWC5D4b3frFowPy8A9oLNQRP818yK0uJV5/\n1NOIcibNNG+ZLI087ZCJZNiV8hkuMgVbqsJE16UCybNc8wI1v21I/LVozcRY\nFmAEuRfeAkisPz8R8DVSJRqUVnefbMEiSRwhQTb6/QoGZEi+YQB+uhpV2DpV\nanV1l8JhqrjIaots/gkN1Ga7IZlNIwUU2xVmZVdtiHS4yCdAGD0J471bAiM5\n1xqugVX9+huuOKeHmGHSo9k74mGnXU8bfuwbLiZCKIRg/ZyzDMZJ7i1BxXtW\nvORQ5cLA+LF9NZmyC/xpEp9uRYBvChr/a0WjjueYIRE8ETNwLpBjFxMemZpx\ntS5cgPELE3tfMMg1RxN8LtrosgQMExEvNvI44/vtMrAxUN2sLYgjyIDhsisW\nYLhiiFuYdV7Jj4jHN31yj0RC6Asf09MKc5bbBW97X5hiAUKkci02ew58nI+6\n5jx4\r\n=QN0i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/typography":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.535398572.0_1580753511555_0.5843564802220163","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/slider","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01fae392bca71dd36feb4e2341a2da4eccecd2e1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.5ff33802c.0.tgz","fileCount":37,"integrity":"sha512-e2Bu1FawnjRRDf9IyDbz7Jow8UYa4tvR7u9tJSRF99AG67caCIMUcF9v8jL0iLeDZzsLNH7zS2xxBRRhLjpXcg==","signatures":[{"sig":"MEQCICQls+RR0W/xCfYi3m4hrikIJWLSqfVzXaqUmrCTPjPBAiB0xNwCCG7//uJQujfdTPGc4ODjpGn5VDC2p9xhjZDm5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObIDCRA9TVsSAnZWagAAdYQP/1Nc/+j7ebk4Jn8a0ZKJ\nmw36L6so94ryW34/E8W+Lza0fn+Clpp03KnkoMAEtWtKZoDdPoxdmFcm1I8+\niUUnYVc3kXbTd+t8aYXWd08Imv/NNdiNBik+t5e+IsRD8D/UEuYLd0ik9BgC\nnnRKqyKajRaklp+W1PkWtAa/ngmKK6upm9YA1WjOQj3AKROn9GESRnDvFpz7\naJF9posA1Wfizjf2RJvwkUtRdfG/jo7U4pn7S7wRM192LdutmxT+UAlQaKg0\ndGxg7C2oZGcar1WrXQNzgEIFiqhYGPylWmSE6go48Q8tbbyX04oYf6qctiqU\n5I2hxVpj76nNFyq1cNXbvLJo04YucI7RxhRsWG1r9fCiRfxJ76ilEH8sZigb\nTT1l/xTCjD8mS8lh3Sv71y+/tc2C7NmXXbeSYk5ddHs+LKDrN4j3wwaVIsaz\npdYSxDTdn85FTfxLSyghe2Z6S6vgaLYNK7DJFlE19gKcG4fhKsm0fMcEleuP\nVTo0/s1RbH8laX9DnjVqcG4gCrZojivycVd1a6HcPn/KUroUNMQ34ACJ4MFx\nM8YxXX8UYFuXWaMt6BUn3Z52kf/xCRdoEYjO9XqVLQ6s358psYH4QbvOuaaL\nI0xx1gIy4eDv+1mzAqSph/WqLCT3JuDtGuRT95zb3+xiWzdwgTVEbXx3s5Vl\nNJoT\r\n=CySk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/typography":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.5ff33802c.0_1580839426636_0.9817044448366845","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/slider","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34ee1bd12c9bec1e844b9db175578d1698825186","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.1eb29491c.0.tgz","fileCount":37,"integrity":"sha512-BpAr4gBNx0ZQ0DnDzeyTcelKi4yW1XP9KUt5F7qUC1sVt/i+uwzqAU4mYE6lWMEughPEzlamM0BQUONkVgfq1g==","signatures":[{"sig":"MEUCIBFV/7N1rAnUR4AYLgdduY744cnVaRoKtGBRyjbb67i2AiEAlPseJVWJFysgDYNz3x99pqUFA2qGR5fMGjD07UdGLP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdtnCRA9TVsSAnZWagAAqfsP+gMiIBEomVGrSdsNI/8w\n0yBySoRQwYlWe9vvwUf0Aya1/u5K/MjojpbJTP82C8mIPykJ9b0tsYfIxQBY\n8Odnp6oog46Y1dakdNWdHviS/mD3IQmT5Aax85/QaYrNGWWCJj7lxDfgFFJl\nQYw17RfP4aa19CmnaNaYlZeMNY44kIg1t+qfI3UrIwx/waX1nzSIkLmXKbAU\nnmPsCR+uZ36dN3qU2P2g1hKm/guNPk/0+Ann8Dsm7umgifI8l6wrJyKs36+b\nvHLpef5C1bYE1NYTKkrC7s5b3n/Itnpe+W9hehZ2u4CxGw//0SmAyavc3TsB\nrOayReOzGXQqTyAubQU/ntPXhUPTz7SlHdM4W3ENBHZMambWguIiuL22eJbU\np7jCU5Y1N161UVmrTdw7JgFAfbC+k3hfNcy16WEzWgWYt1JtxEmeAuvW+V5b\nOie4y46c1pf8zzL/DdNV+B04jtO3jdMgTaGo7NgxDWHRqNcGNO/VYcBZMX3T\naKx4VJA18KZ+ePTB5z3QaZywgnogIWYz3Iuhx1hqUu8VjtLmMoJu1yhd4mJJ\n/lT1Vvgkh3nNWBZLQJ6vvjwurduXsTjamgfpRKQm4VONIMmaVbcp3FQQ8fhS\nB3ofuPF24Y8ZeqmeP16HbpURn9DBjPBjo/W62eb2bBQYG8/crrHsGKIAtfLM\nUb2r\r\n=hUhP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/typography":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.1eb29491c.0_1580850023264_0.22632546211763094","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/slider","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e51f8400b3d1fdc4505cfbf0b208af21eee5c98","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.4c7154b26.0.tgz","fileCount":37,"integrity":"sha512-4NLis35r0n4r7XnL1CWAmkOe6FjSlgq5iSmYSShc3tsTKxZwZb06SPU6FspchXKrQK75tcgQe1SYwUDifZ8TsA==","signatures":[{"sig":"MEYCIQDs5H8tF1L6Rpwn9eFPjK4isEVE67ZOffyJbQIJmTtRkgIhAMXQUgdWwEDLYEoLELBQWXmXTxGpt6FqNgI9HJRwX0tE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOucmCRA9TVsSAnZWagAAhmEQAImGh77yLFwsmwEz2LrM\noSMqwpMKe/3FcNR/4mMYsnPrRHGzhdEP4hFs3G6gmZS1xDpmbVLYoUpdqfmT\nSpZ2tzfAJLl/gjXJqdbxQbAj5uXmD6MS0RG7+HfyAy5WZURJmZdNqfzYHnY3\nIAD/K3KrjcwNZnNDeXdL1N03OFAoG38YJzXT1FpxD8222xZuQ9TleT4U4jLr\ntQd68JOHqGpZ9J1/IMmU60CHgi7pYT5UbUpxf3hsnJRo5zMHSA2pa0weM8xP\ny4qmaP05whigvJJQJA6H2bQfE6h8zAgZ/UFFAnoTYb5ZmThiMChdWORlsrg4\nAaKuHU0+HxQ/lJI92SSoTP9LMOHc25Fv2QpxdBiqZdSugaj2LefuGlEytm0c\nLCFX0giL7ZTbLR9XBEu9Tx2sNynNNBMqkdXfOgojVzwTzJNoTds5FGsh+987\nZsp73wsFg28bLJTbdcFr2VU7v0sC2db2Wh5qLiYJaceeGQ9jH0SNeOIiKKVI\ng6lpZbJ3xjs4I1+9iNcvcmdp7670YoXkdtl6AX4Gu/C6eqYNbizkpLQ45vpT\nmCzuMcW/d6FO0VIA8pbE1Xmcl4yG/ZwttHFlrRkWtmmptsNia8ovH+YPk22Y\nPg+dxyEIKPdjGvmS7GXji6JqdK4epb6S1SFnmSGER4/aHzQ6R09K9YvMakYm\nJcFj\r\n=CJwc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/typography":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.4c7154b26.0_1580918566039_0.5668291223372204","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/slider","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcd3e12fc37b4b0c36115c0c5fa9b505535bc8b3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":37,"integrity":"sha512-vgHVeSm85CV5BdQIVabW7rdIVN65if0PAYKiNisSwhPfDYpQSDVgrInCBoGJZW9a37we3yg2Sphf3inyb5+NjQ==","signatures":[{"sig":"MEUCIQCU+6wzodluHRd6kD2LSLV9vGN4LLa8N5VaLSLKb/JNxwIgTe3MB4BftwKvc1Glap4ZqklgVYJwdvpEWuCZvtUdGeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1CzCRA9TVsSAnZWagAAtPwQAJA04jPjwhXrOpVQhAxe\nZFEijH/4Tr5vYckCgaZH7AFufsHelN2jAicIVuoAze432G0SvjxPaT+nqEL9\nFDvhgC7PAHdOm/ccodPspqtBZAAYzyITncy/ZR5ypwKG954y/MeIEkZzGzwP\n/SX6zVxPA2lb4Zj4nxFf1KqdNHsN1+4CrPIfxkX/uMKrqrd8v9wfFamvAl0W\ndClHlvISmfOvhGQ6poSFUiApGYpQnU32X12BzGsXW+LR5YA136FYYeig19Pq\nRSRfqjFXBWKMBkzDmzhKjhgPbWnIL2rS8EjPqkDzxDyV7FdOl6gn9n9h0Ju5\nOPy3h82VS7wbde2JY1gMSI4eQhDa+8nyFTmvm/dUqXKuTN7qffVCjczxDcQY\nl7b0x1zmpYaWTbjU6EAVaTUsMvDEfeUzIQY36g8f+j/RqbkWdR1mvUMXaNu4\naQLiMplgN6AoqV3S/6AsfAhX6urGWuDpx6hq+7DyHIDMHl46fSMzskwHcx8H\now2ySJ9JqHVVCsUY48t3ljAftd/DqSqKBgbrZYh/Yuorg8QPsNZq9bZLp7GH\njTmMbK0Xxumh5IAIGFHxr2vVzxDHmKWGs6hVfPRpA5KVrdSQDJZ3l1q4URBF\nQxZ2UV5NXdQnJWLp90BKHjxhIUcRee/SVRGQE5Oz7XhvKGvgUqZ0ZG5xD3FL\nydLx\r\n=nidl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/typography":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ab5f49a2c.0_1580945587203_0.5147578416315837","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/slider","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e59c44d14ffc9d6f2bdfb326dd8e61a23e85c7d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.c541ebe15.0.tgz","fileCount":37,"integrity":"sha512-z3GliMq8rTYMxeemX2xZnFJDiiATSOu4SM20vXmfaLlgDFujjyzvw8rqiprS4AkNzrSukqbqgZq+aOnVkjosGQ==","signatures":[{"sig":"MEYCIQDBrb3ze4dvYwMpQUDxlNJwzbLL3t5R6qzHfm1PMsd8FgIhAOyLga6aiAmvoW9ucYa0uTuSeei+baSUicyzSVxSZxhu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":361071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNhCRA9TVsSAnZWagAAne0P/AwXjJ2PUMsitdm1mj2/\nZFbC4JZwJDCWi4CZI8Jvrrbnh6t8xNrIPLZt6/mnVBrBCyYWVOc8Kyzfawnv\naJoc8NTf6Iqz8C6WRNOJsaXJDQMtuwyB5ioEMNVMGQzXiT0MVSFQyus0LeTW\nVrllebEOjINKTluJjNOoDr9QYn2sOVdfd3lm4JXSpGZob1eBcAB/DtYibeEd\n8bh0NoeWfj5tawv0wqgGK92Gw27RBasMl0ivJsXJPN1KZUEAgmndqpAqlZnA\noYZVKPcD2I2NV6vwwbEprw6U27DxHBxpe0Qp+vp/EorVM20f76qesyDsc6zz\n3q9R/90waJQWbng2OH3dWNbaNf78CMsh534UevcNk01naCyyirv+X5x4jjZk\nu/TKD6nrGxvJyBpRkyxqVBrn0NPJj3mQpNHBsa1efxZnzFOytEjq5xROBC8R\nF451ssJ6pu3Qakwfq50GPma/NgV4QAqYsI7R3Axj/lH9XeHXmlqmv3WNRUnx\nvTSW1m/QmB68RwW5kyi4MJtP8zjc2CQ0d0KokJCYj2ON03k0yqVgbWSN3Kng\npYjfoSbsdY00aojelF0l1fqvRjjFzcvFXz+a/DSq7luHwNn6UGxkhEi343v0\novJ1MUg5W1yxCB/CdPDaLDuiSAqDsMTwTXH/I535oRw6kQoQhlA1Q/YEVYFx\nyM53\r\n=Lrlr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`mdc-slider-highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`mdc-slider-rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`mdc-slider-rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)\n`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo\n`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/typography":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.c541ebe15.0_1581028193088_0.8981592876987203","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/slider","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54d3b2bd93bac55e7111ded038efd69607773ea1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.98f7faa05.0.tgz","fileCount":37,"integrity":"sha512-unzI9M4SpoMRSAwXlMVQyQSwoafAuUJGXnlCb0UzcaXX4c9Sg9F93HBQtJDrFCt5+qgM+iWXR7o/WhibWSMTjg==","signatures":[{"sig":"MEUCIDQADwPx3m2TMfHJhqE4KxhbLicRpwkVf+ame0k99DoZAiEA7yKu5iTz0etMlMm4EsTe2HjZutjzJSCjHuyarJcu/P0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbipCRA9TVsSAnZWagAAhVYQAIOXoAsOBby13B5l8NWu\nx9OCHY4VI6FlhrOZoAbE8ZlVWJm4+ypBlTpDCeOP5gVn+FlMznWT3ciif6V1\nNvt9dmJqHQ4oYp3rq+ELU4TnkdAwp2n2SZ5TSpzlFC3zJ71Imi9vv9hLpUP9\nZlEytbXs18dMgTVdC4ema4Y3yRc/9M4wbKsRXmiY9C+8zoY4g6HQhyNnoxNx\nmSaH3C7wXjt0BL3W0+ozO2rItAGMnfO4YY95RwDMpiX1efKBgDdiIRCX+JnY\n5XWCKutpqZh/N1+f381hNNnvQkvt4sU1I0ScoBxkLaXPRyJasBxOBrJUmEjo\nQojBB0dpXoK7S5H1v4ZO2Q4eYH1ozQ11Q2X7I1j1wSQ60+kV6lABLA+C8mM1\nODop5S6d3zL+uFxG2maauf3ALlugSUOcn5YdBwsaDZebTHuoHXCJM9Tn8Mkc\nwLDuRG9wP+ahhqD3jkcF57377Sbe0wzUKRlsgnCKv3qjc0/zE4TvDnuqtxO7\nSMLGvgfyDFsHwNe9V53iZXjc0Meoov5nc2WAtkuPNtohwCRm3cuM5FTKhVgx\nSJTovbM1XfCGiZppB0rzxveQ9TsjvHFvN7jkaDC4YolZxYcFKZo8b6/1d7et\nDLqPiFuwewbCIzGrv9L1T9mBCafmBl792nAne6vEpsebT15Zqi95W0NkHb5o\nXQ4C\r\n=qH+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/typography":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.98f7faa05.0_1581103272541_0.6881283080872143","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/slider","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14fd0a26ea78884a342e9074f92d518f5f34fbdb","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b4727e43a.0.tgz","fileCount":37,"integrity":"sha512-a3VRdx0afbGLX+g1QHtHSvQK5Mz8PC7qduWbX4HOlVjBFBRTJWROMSvkmdO7lmHbCOeRpA3iZcDp79dhyRxhWg==","signatures":[{"sig":"MEYCIQC8moNwikn5TLtvi5FcqKYFJE5IEUdaQnb7TMQ/xMpXXQIhAItbG1AUyyHMOCQg2hlPNgeisv4JncCw+3yAcY4GMsdB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCuCRA9TVsSAnZWagAA/J0QAJ88ct0aqViXgYqbIZpD\nQ40d8G0LUrPX8ZBbtRSHuqU9GWQ6qmjYy2/a+Zih1ojZa13HnbBc9jOzxrIw\n3H16GgzjPJTHfsGOtVza70NqCIQDA0jLyeDxkQGRf7X2sSDqv67nbXJ52I9T\nHlV9avw5MJwX3EZ0dlHlO1ViKY2hn63ZXsVa8S2mQ4T6DyyHVwdOUIoL5FK3\njuYousdxJ2+2fRjkr2NYyO7VrWtzkgHgc+hPgbOxqc6XyfEtJWLkr91YqPzv\nIUk7kEuL6I5qtDW9sOgg8DyMXm9sfZVqILjTYsDEzmvSanli6tKmpszAcnTf\nSXT3WH4JRs/Va1KEGmuEdj5x7HQBh17sgcwRRjig6nOtKkmsTrYZE8iJSdRJ\nLSk6UJ9XL/zZGFX29XMu3hktMwebqlyIr/jrdSvzyQt36mAP3ITpbrBvHMSK\nSKahlLnWK3Kw184uN9gsJrQExLkBHe4r3nTSJ8/3qGxHtuXM4yGhQr9YDCLT\n85jJVQH1auczC+lUex1Jc6yOwHM5fleoZpwQ0x7XhffSnRDnfOJa6FaGemCK\nvKV0QuAuO/Pk4Yf+M6yNVWa+GwWVKvNZRw0QgEGBEXsbuTw1qu90WeseBk7C\nePsV8NDBJDKeRBfbhLjptMDckgI3Z5KHiH9m941b2ie4TrXCx/DebRx5vCCa\ncyYc\r\n=huq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/typography":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b4727e43a.0_1581105325818_0.6459508463539103","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/slider","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c69106c86bd5ec9e7e79261f189bb8c7cf7bc84","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.91d9d5a65.0.tgz","fileCount":37,"integrity":"sha512-PnSQ75gdxWEoMe68L4nj/VWPQ0sQTgyRy0SsYjVrKDWBTfSeuGQ2FjLB0Hdtht3+jQdhdS/R/nzgTwcOXBhscg==","signatures":[{"sig":"MEYCIQDeKq74kkG9MKbU3vbIQqUcVM6kszu9pc/zXo/kBFROUAIhAPejEWVLou6t5hcNHnRNclLSFtD8d3zK+ejyPq8woE7v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevHCRA9TVsSAnZWagAAW+IQAIrId3wq+2qqvytY2q5k\nqVEopZKaRA7tV8zw4VINGbF8GVHV6IyFXcX0vosU8vNpQYxG7mi+wsvi0JWQ\nIV7ZZQrbUeJeoeOinut0ilGodPkCe5DzlcN/psZ0hjAfSMtb3L6IPnEH98F4\nQ0E1r9Bv+xVIQmXg5ozlhjRCCn6yh2XBc854/MSv+Rdl/YKrHK9Z3rSvps/5\nRkxZzKF7+7ztTxnD8gX6g1VQ8ZyeVFWA3Fu7d0JEBXj5q19NIBkW8TabQsE0\nfumyHDEHy4K6c9oEngqmHDhajDNWtiInJLrtkkXNdJsb+4hx9JbsJbUmxYhj\ngtKH4m1C4VMOxUaw8/8vLSfPBzEIDbiKPS/m/4LNPDWw73ggYRZO/B0+as4h\n66K+WeGYBndzI45MZeoeZGkZdl5mJqKhysUZRheGxR7Cm5murDvEoaWyqYJD\neXurA0FHjSN++fqI469Y9GAkniMqtbUWDgGe4UiFI5e/7sQs8JWDGPHZUL9x\n5Vwpqfcsj9Lx6JZHr99NVKMggmlIWVOXwEqpBlZniXrdIwllWTPtXSxyWSjM\nIj8FxPcAiFrP3x1tbp7Ee22vwfTY9+bijvdbaKaCEwiWCzA1BWmrcjt4vOfB\nSXyUGUc5D3x6yBi34lnkdmUsK8Fcia0Z8ngo3oD/JiuQELgr8qfY/ubGayjc\n8NZl\r\n=LBMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/typography":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.91d9d5a65.0_1581116358600_0.8160474034161189","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/slider","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ca1444dcf0045c21db6a88c705eb9c14f1964d5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.d5c006ed1.0.tgz","fileCount":37,"integrity":"sha512-7nBj6aADJbfYtYuABwolekFhx5HoaGo/VuqSbX+Iczp2lzbhAVMKo9LcZzBKarpA/Qlp8EZXfiQUydU6SfWmFA==","signatures":[{"sig":"MEYCIQDtXkytUo/hpbjwaRTkA4N9cpTnK6AcA0P2FskVv5mjJQIhAID0VZTNl9q3MdmYLeQXjvtHpas9rKksX5H5jvB0QHMB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYljCRA9TVsSAnZWagAAHPgP/2DZ6eVgSGGWPND6AF4X\n4Y9vVzaMIBy1LRr0LDu7h5PKqL93ZzF7GaXnhxE0vIRikp0Gse6d/gOgTby0\nL2K1VUEhyEBL/91JuBtLuqVLU4MqJt0cALRkQ0Z4rt6wxZrmpLTMgjChZY2n\nvu43MQnvWsRd1BFqUamM+bYO8hUE07gZRdPtFdhV05vZwltYPb6U3fh41OP8\nQdW4xQO/1auSZgNkdV9nnuBKxSXnEajfup8MpHPSYvN3d7E5cGH6N+x2NkWH\nVbiE1syQ1c+vWymf5RTYHEz4Ih6KSW4LPxeprMINtJ6vQO6PxGxsQDaVe54o\nK+9alwesNcoSZg/irGPxYZZVcolEHTrW5X96tM/C9lvV/MSWEPnVILTWBySV\nRa29wNUE4Kwr0lJ+2DwtX2UYseHRzFC1bklowO5R7CMXeqSmTkfP0uHfxusj\ngcI3LYha1ULuM/Qle5RXNpCntyTRTbPu/h0rxlapTg4H02RLLXqEhriZXipA\nYIh27WAWtWL1YLwQzaCwg30G/j2TXHPWMPj3TZefIcHm4odxkhjC9hqrIaNx\ny5mmGOzFPkr5j8FQaM2H+hUlLR0vdZ4O634rtaemsiQ9p9irDFOTjI9LB0VW\nl5YJrG5+eIOUEHQdf7gJmORWr5H0GDtZGvRLYNXRbS4FQTreKRmDS2EDdOvb\nnbka\r\n=2GdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/typography":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.d5c006ed1.0_1581353314815_0.46488745970671075","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/slider","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef5d0755b8540b6b8d77e71ea94d3237f20ab364","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.559f1a570.0.tgz","fileCount":37,"integrity":"sha512-Cze7a2JafH5M3+dS9u/gSZUScEK+IegHlABJuZu8he9Dvc0Cy2tCrvBcXmyd95F0nGOk9VxHh9Bw/9bocs1HpQ==","signatures":[{"sig":"MEQCIGEXbNJhf+SGdVHnJ1Vvn6i9uV0YPIXCQuLxhU1DIaUPAiAtkdKis+tpTBEzvxiHT7Q96gvevyPa6VlNMCtWxfpqsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHgCRA9TVsSAnZWagAAl3UP/2gWdDlJcLoQ1QRP9mHY\nZgNglamDkXFFhgh5mTRoZ+h1OUrdvDtZKOG1J9weN9QwDYvMcPErK6uaC/rG\n6afbpkeC0sfbywTuxbg6rv/zCMgoWk8Wjsf+79l4ArnLVh7VPYS+b4i0hhL+\n+YW6ARB1l9kBOQuIzBY77I4HKqcThj5XbxeiyUofNrbmk66ffTD5f32hhfsa\np0WGolmyS3hGHjVqBPoyn43h2FZewNLj52M6NVP8IKiuWccusSHYBrXw5xCc\nAmWXFpFqsZhiHi0F26fN8oRCs4YqmATyN+BCfLq1l+NtcPJOCcQsEuP5Mqrj\nDO4weM6Rj734e5cqQVFHCbiGaH0s1nV1whRTlHAxvRNP6bFWFvq1rDXu8PWh\nMG2Bp9TJyBzoOZD+NVk7+tMmoe0EZlDny55LdgSngzvEGU+WtnFyC7lR5wDb\nPnZ1co0rXplKQp6WutUBjtNdcNQ428DvVdQmBEHECI1zCAgVad8eIayVt3x9\ngYvqwPwFMMsOpXCEjJ1uU+RZifmPOU0JQxOIGkpG1FUhtLcDvChcGx32jSlC\nqkcgXY0M0eJeOgp8bmrsGWCUgXBKSZphiTAk/JB3UvN2LIZ+FjwMHUr29fif\nL5tUYj5AUlsKBkELNBoxTQnF1loI8KraCkUbBI3PsJ6VW8HKtbgzSqLgS5/C\nj/xQ\r\n=IAed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/typography":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.559f1a570.0_1581355488334_0.9290769113167114","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/slider","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c40b31d9195fc2fc3294ad759741f37f340ca0e3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.ad3bbf782.0.tgz","fileCount":37,"integrity":"sha512-j+R7SF4RxQFXyAKnvuX0RNDyVqGI40lOsZRyWaLabhHodsDJ0LcjCTtwInEdcwndSHUFpo6AqDoTjpsuzzsCjw==","signatures":[{"sig":"MEUCIEt/cPd7ipN0TgG1DnMGPJMUwzjPGSzMqAyPw+ZhaiBwAiEAuUdK1ZmxHEgQnZrN6Jnkbi7wJRUqpsyn/gREvYnKYx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQaraCRA9TVsSAnZWagAAZY4P/2CimOze7Kr4H6dGfrjz\n3VEBe1cYT7+Us6sOZ6MaSk0yl80LxYRBkU4So4lCW4iFCi8uREu9R1pgVKKW\nS1hRftOoatQ4CjEc30fKkAA03HZRJtmTx/LkkuyPLvJLND9IyTDKlV2tvWdA\nvMK9ilyG31qA2NPxJ8NyTH000DpHgYmhv23SzZl9FlXCwmoucojeU7g3RcGu\nAMW7VXyTMTDlHpQ8GhDH/wCTcWYKsbqKinI1L/lqI+0JpFShyl9qTr/YYdWI\nlFKlloaFsXjXF5kHU8uiKR8HKVp5xwXTIfJmPxpALGZObFtx9UVZs3lqoS4B\npneVkIYrWY6rHa+Dfslv8f+wSlKGSDokbmOh/nhD3xV3X06yNDTDJxqN/Bhm\nCC4zgs6e6JuYbO7so982VzEBC0CIHg1CCz37/AZj5kqeBGLarsw9PsGAxfYi\nFbNOzI9U+nh3+FR2XORGlRRf1YtDejISjhYEwJ7VgEJCELPhbhinfM14rGHc\nRYD5BtY6Wi+RwKPSak1USwnXE8H3xwIi5pmtvCNuso555A0Tks+La9FeJGg8\nzyPsA3DLdPMnVIUu16hIGTwb35bFvg+4vPlmvrr9xv3a2v3n1Av9kuEyR4Ju\nDOknicFVO7geAYTiv7qkkRK29TJlhHxUoj5X6iOUdllDa5Fuw+ltnwM/Ltrd\nlX/z\r\n=Uk+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/typography":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.ad3bbf782.0_1581361881441_0.4522624195245759","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/slider","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e293c5bcb731349f7339eb130a2e0478660f18","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.570d8e49c.0.tgz","fileCount":37,"integrity":"sha512-LJw6D4vlbwIcOz6HFiwtzvDzvytURSO4TFTV5OTKpGo9w3WacyQVbhG3nNp4Fb75HXg420ByTCYBx65uANf63A==","signatures":[{"sig":"MEYCIQCGFwknPESadGiPuqDO9cjo53ee8BHKAdIHWYRdcdOtKgIhAM9vLg32SurKCfY8jc635zuGzdBhWsfoNhWUFVYBbhC5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBrCRA9TVsSAnZWagAAJgoP/2NDMRXldUNvdebLQmYN\nDnfGIYMQU65j6GTJ2L/FXYLYPPriNSH13dGsLOLDEO/7sElWt3XyMG7CDSaA\nWQVb7v9t/Kip19TqAVZoDr3SN/1sdNi8tzGDf1fmZlOLQGNxBdJyuLT/s5Ab\nsCdfPPIXGlyCr+HxttqgzZVACHiu3GFINimY/6YS+PDgzyyOovrrP9frA18K\nuYudijG9Dd4QOhjtycZWsJCmUdLRR3kcjCxOgNI5Sn9SBQgdO6QGUN3LXxnl\nKZQ697LseLkyPdHA+eLHzLWftSEIBs31Q4Jzp4Iwmw6N4JYxWunLU5x1ICwC\nmNMr/zAyQWjBoFYB+631aNW+qq+onbthlJWrW7Yc90IvFjd/BnzBND38/G1u\ndap/6l1RtjImeNhT+dBxFNux4yikheIwZEKOD4HdDiQnutpaCC7f13OaTV+U\n1TjfHWX3bRHvwRJVLxn+uXpV82UYfoW6Rp76/2bEv2px/9P9Tw+Iunl0HG+j\nRpkDa17LQuTnKVv2s881O37U6fYx5dXcAYKk24klI/O9QCwoyCjV97qUatN7\nktRAxbEyNQ5iAYhabe5zoEBHvDWxdP7QmpjoL+h+/ChkftVKKUQsN93YKeva\nk05NcneyBRYu1FQb9WMfF8Pd3WGb+ebs07TR1/9soQ7UxeO3s3mEwrnVhK1y\nTVKF\r\n=FwZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/typography":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.570d8e49c.0_1581367402799_0.035493516025642435","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/slider","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea34bcca20992b46fe7ac7b78d9e576705b59dca","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.48b06b89a.0.tgz","fileCount":37,"integrity":"sha512-7RNBMsEw7ZxHVFfWwY9sTo+IoAgdc8Ie2mOS9B5eL64tLZ1S0rQxqRxNsEsYizYfQQqAuytydGk7nw7guvDsPg==","signatures":[{"sig":"MEYCIQDzgC7+xHJb3PSchqwqcMI/sJxZ7T+lxmOV30aIAW76vwIhAINJ8qgZBt3u/zXJTZv7lbtDWP2V1ShV7MINyLNnQEI9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvW+CRA9TVsSAnZWagAAfcAP+wTxF2EBWZUZ1VORhQIx\n2tDnLA8LMcW06uIAArj+HzvDTv3qy22WTyRfWbpk50MShVNuvpBLfRdW7Y/7\nltLvY0gFWZ4N3gSvOPcncOam0sunSirIzHPkZcAOE1m8AvtRsLrlkGfjo6Ng\nznA7Rr7hkgdjNHIRWADK696fmEMZZJO03tjwZIkvb8sMneJ+noYzWP8TSTci\njx5zjoZHKb4BFzEFz12CZVzGjLtnfH44M1AVx8WBP84YV7fjQT8j1Wnqb1Q3\n/ASjgfotf7lXssgMdwSJbE8qIVjk8w3Xa33pqMqmdUf/VO0Rb1m6XsXnU/Hg\n3MRsJTyiIji175kJy6wH8FJA6/CIW4w5PLUb/VfnUV11NKlufo8KnliwaaOv\nnpDOrXXJnIq/zhVzHHzzmY1KxvYdKaFGNxe8Jci3aPeefyVqMUKGa0Q4s5jl\n7QjKYhzyGf0iP5uM2pAW/vt8bXx+L5mcL4zR+7oudX5T/jRasSPA8Lsu6RzC\nkt0inIjqDSHsjP52NnST99nHf88oEb4XnmgKYnbXQsU2V8bXmM9TmgLa8t/p\n9aF48jUvPOUEO+tlrZN6BYE2iqzXz7/cUIpC2+q/0psFp7WWLA2mze/IWfGK\nY6gvR1L75Id8gd3xAmXD2kqUgmlQYCkAQVakYHfcs0p6znSX1yQhuGxud7fg\njgIB\r\n=cGDJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/typography":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.48b06b89a.0_1581446589904_0.8649176685168316","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/slider","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1fd9dd9b82f30c83d5253dc78cb9a2f59ec1419","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.612443dfb.0.tgz","fileCount":37,"integrity":"sha512-leGHSfK/VGuDts/Lh54uv6hepLnqeo9mjiu9CdWAzBSp4FpOGkpTpZnNNnlJ9DXV1+LUCWxOY8ZhlBqERlU2oQ==","signatures":[{"sig":"MEQCIAwFC33t2DND2iN+PlQs2dUnHmIBP9zyRtSNvffR5tYTAiB9BUYWaOf3b8x1C0Zm2sSJgHKvhUrqwZnJnTQGHG03jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUiCRA9TVsSAnZWagAAHWIP/1qCRfPb8ltiRLv8aYm7\n3T4GS2vdVfraLQhX6974J0nauUBT0BL9InEoeOuAb7Dktu2kQe+Dd+3PFHM5\nq+qxhPaBdSkK9Md3486LEpRYQ/l14dqqzGB8YygdL/LHf7adFnarMw0DhV2g\nPs+s14fI+7WLxCCnQ1XZvcpJWQ93JUTQlj2UUdrYvse0F4frfDp4o1zZgp6+\nFQnn3z9rnQrcH43QzdSKPbXNiEsG6B5XBGhrnpvJaOIN/zKNhc6tWCkWOK0H\nIlZITE5zyTVMPjipeSFkR9oirNkAf5OKmyMvvf5qU5QwfNIY42UqY5oZAG5h\nLE8IwSu3ZRxNJO6inAxDzGzRU83RdwtrPxzMAqHy61t/XlD0D39L3R++7Nmr\nObN3vJQBbT2dAb0pjLfswKmzFgiZ87uD59tCiUXGTmxaon7bqKa39083sQL4\nJvNmSIwzmDgXAVZfCPgeq82opTeIyAskLQoF10OGWlYbti+bYFgt389dikgo\njtnpWYl5JZEqtU4A8Ih5CRGsauexXbXIJJNfe2iMsO6yM86au1uqGKpDbMut\nEBv5mYfkkabkpffc+9Vjt3MJpGlzIXIvtJc0NlfJwoKg/9CIOl+Bgk7AiR9a\nc1Nrv/uk3NNOHloXgyfCHLnwY4Aql2qY9DiHQXXIDI4pMLG6brV2sM8JAwfy\nqv8A\r\n=EE4h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/typography":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.612443dfb.0_1581450529619_0.43336048416307094","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/slider","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c78e0e761fce7472a0844674596f8360cb5111e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":37,"integrity":"sha512-RybgH+hGpctPs2oXVHHWwv/ikfNCM2vF7Tv4S8PWAgjZySbQPOetd/771Ih5gaZ725ppZjF+0WOKDOBRTwLXHA==","signatures":[{"sig":"MEUCIE75Ru5EL0XB17mrsC1RWM5bNav6u+97Qzq3LJFpZ1m5AiEAlqp314lfr0dw8cShj1yD52actKAGQzMAlrhqCHrM3l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yNCRA9TVsSAnZWagAAjVcP/3Tp4pz4Lj3+PQlTeYiW\nl5TR3F3khppTjArgclojfGXJoBXo+cLLum9Qsz1xzh7MUaGFS+hxfBJQ43J8\nBvIuW09zxswWPvpziBO9UswS3goDebYez/+nilEeFCabmoJgHyflANOsjzQr\nLAIbI59fLk6Gtlsb+GFx3DD/VlFD9gjR1jDUi09t61xs2GUlEmmP9YGUSWEM\n/UhzA5VBaQtoKI1XaS49WV9PPnacm6Jyaun+pYkYL6y9GeQg9HLKCXMIvewO\nN9EVhvNBmyRXrYG+hv/aWn6MZ7hkxal4hzNeajjMu8/XlEkxkQ3xZWUvn4ne\n3OME/ghYSYuB7pci6Bzix9Qyiq/JbMET4gdIZZzgJCpmcW8K2KF2LGUSMJIc\nKo0NfIJoYH+cZeK5ehXMGy/Na46So9Xa3r5hDNyBHJq0cDmLQnvyuKf8zo3D\nRRDqzcybBKKzZ5blSq+fd/vIBi1esIl6767oa9m2XP6FD3C9MbmV8G/LYb4h\niIWUlAkTB/vro3eXysvIaBlQXIai4X89rijQiN5j4D0BEgRa35eK2A2xOEYE\nwe5doY6u0DMfJnSlp7Fr5GWCLIeYAPH73FssTENw2i/rTIIVuBSbbCcWgBXy\nnxWjaZIWP5+u2Qyv5P9NUKqxlM99zNzwiS/toE1NG6zeEKWueCujrOq5zUVQ\nGrvq\r\n=RGi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/typography":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.8c11ea2a3.0_1581497484964_0.7135067849131587","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/slider","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a057b91ac4831a6b788a3e02473897959665f017","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.b2f3d311e.0.tgz","fileCount":36,"integrity":"sha512-/RNjL/7Y/CM1dSnTiAscF+519lPYDXOx98+yo1Q9IHGFewlziUuLwn+cjLv6se0ni2jD2/faM6BsGRaI1mIeUw==","signatures":[{"sig":"MEYCIQDQnkBqjoHT+1NDlUkQApYEqns6tffkx3hzZ+8pPojZugIhALUFOM6uW3n6pDI7Ge2Avb/aLfHDk3amxEdhFEw4sP9B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMTCRA9TVsSAnZWagAA7LEQAJ+zytAc/BtVkS0QPXPb\nm2yCpVw2mjHy0/sPozavJqLF5N/C4vrMNR9HIWQSDJvdkir1YlJk2usnDqRv\nrNFCS+5WJMfp4a0k8VbQBm7EKPWBF7fuZRGWQRz0YTrU+UxCA+lluZBM2TAI\n+sH4uCsXT/bqUA3Vgd+/9uwveyh/13+b9V94HojktQX7H3v6VuNeIC0+80Nh\nMqmfShCYghc0jPc7aB5nZeZy5AfXv42aSyTrWNk4ujV9ttqoH2s1ggBUO5vO\n7WVZeuwWjZl0DZgfTvowZpwOs2ba9tsiq+vPIhnx7n61YVNRHJ7UzNU7Kdei\nY7N8velpjaISfAfvYnz85pbxhU/SaLczdsefxDblsPn9CP+6P493a43Wqvmj\nydyuGC1yq6yp68/gIKAhTbriXLS1GGjeuOGUPwOLD6N+zGk/f48jSyXnRVnO\nAaIFZkHuLeoeOdas93fE3e9gq2A4VIpIKFOV1SVvdlqUaQI1rjjuRttOTxT6\nJk8LpqBEyWytUG7F/7Aj8mVzWsa7ghnxnS1WsC7OMHJYNl40wBISo6+a+/E/\ntvWOf6ydRuTrkDNINcCaonsoNogwKRyn/KMZk2f1PbQ/ftmVKQCkp/Ijc+uB\nhzZATogmZLSea7hszZB2c96k3lzEoPqtQ1sUQs/f7L5CS2H0Lj00KmHf11H2\n9GSq\r\n=OoFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/typography":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.b2f3d311e.0_1581630227264_0.6679609552802832","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/slider","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c223a81207c2b464bf70851e417de9333498350","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0-canary.4f488d0ee.0.tgz","fileCount":36,"integrity":"sha512-7I6xRxIfMKVr8JPCw6K7K8W9kRVI+990RoeU9Nv64hsdG/lvb5CLhDEBunTe5BJiLjY44Je3EycocJ7HEbDFfA==","signatures":[{"sig":"MEUCIEqWMr9srNbidGGE70ObEAyKmNWgTZIaaAXYMzTWD+xVAiEAw+YA4VC8r4hMN2LWkr1QVEuEtHzOE6fasgDWTodnc08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZgCRA9TVsSAnZWagAAn1wP/0eNp5ZOIeZMItlyx7R3\nt79x/OFzILx6jUJs8f9p5qQhFEy6ERWjuWMRLGU70yoTzG+zyhsh6DQr+3BJ\nToRWfokYo4o/HR+muWwemyXcg/fD+luJ9LLNZnkfm7cXkUFnMTs1LjKlGv8f\nszmK/xY9e2ZrCSKvGMJCAb4nHH6RugyERhfXQoFlQVBxswzOcUOYTqeJDtA0\nrlHR+1ncrOCPYjY/uFGgWRCAPFnz24OT9NOMREFDqdBKl4tjwSodLQ5wMVtC\n9pH6A927u446njb337D9wK6+Ah7Len5i9G4EjnLvggSbxee5eh4YBxq3YTt0\nDn+zsxoh45h/c96VqzS1R53cM5nHcebDRZc8x36Qpm2Ai5qpJZzY6hs/2Gam\nj8lBVwcSgTkbHsOUEef5jCITS7SWxaxmboWU0RCVTDYGrRBou+S9FZwwDzZC\nYmGezTEJML0Gk/ytScAMXkJ6IFB8FbZfq7mw1BWhe/mQJs99UN2KTwq3sAMj\njPK7J8vpl3du4n1LDcYa+vvrWfY6xN6r904p5pNU+56WtUXwN4JJiETCKdtb\nYw9U4x6wmFWzeVg7DL98nzMoRGQqROnr7xShlT3+QP/kaj9+5Ok/H2+Y4i9Y\n8doxGZP8M5AH+pm2OLfTjIpl4rSJiCEpaivVs3x26ZXvnQXU17gsZIDCmjNU\nsagv\r\n=0D12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/typography":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0-canary.4f488d0ee.0_1581635167986_0.5001876949617059","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/slider","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f42626abedd776ad7a483ede70a5ade3a54d4862","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.fe79de07d.0.tgz","fileCount":36,"integrity":"sha512-+Htag2D66f8V++gtpkiuwtGW9exW8PIXambRmQmybER7SnozM0QghPqqGmMr8yrDr/E+RP6hKt4G+84QB7RXFA==","signatures":[{"sig":"MEQCIFGPnygluHAnlRIqFQCvd+WZ8W9XwNnSInFmVCzfdV6wAiBfLHCvANLHX2KWVM2VaaMRlhFqz3Mx+lPFKbiJmxiFhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":360189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdp0CRA9TVsSAnZWagAAIjEP/31VdnVYJl6ZMszgNMdf\n2BSTyZzv38n15PkAH6IQCFRc8elsyuMD9Eo4YS67/az79ankrSAP2EX7EwJr\nwWQa+spjwR4MntFrNuU2vChCXdxHMGrkVHvFs/A/Ni2005f0UA/Dtn8MGgr+\n1df8s6E4chSGxme1Ma99wkyxVbiHclKWz9v7+0Ry97TMcyJHpVWOiK6dLGh1\nniN2RVkV7r2uQv6dkHhcbOsvRRJaVQPeuKfE5k21eZBryn3k8UaZHk5Oj+jx\nAeYAAJEC++xVirzXqwa/bUWxVVPyFNEEFNrDzkFq59S5nsU94LQgUmeTR9ks\nbb0Zx9l/V4M/3aXcoKbDmj42Xm8HjjRwglMp6/Zeizzi6mBprkf5NzHuSvpX\nsOOPXAzOXrSlEy9BdYgTJdVCIqLriS/tBABc5byrvL0AheuIXMWav9y21a40\nQvrCIDsHrKL3gvGKZFa3LzdXhNtq3wqb0E16QKVAMyyQVXo8uRJ01hVcn5i/\nIGw8f4xrvkpwtPfnuw4fWzKMAJ9ZNurqG+ah1qXpUrIT3xbZy0vBfbyTVsZh\nktq4CBZzwulnNgdwEpfBgljhsrX87OvBjZbNVx08VtWi9He18iBRdlEWRBjq\nZpV5tfIGx8O51dwbENZeQyqdEWabOsquG55SP4/ZfAkDj15sthY9NIAcRYyx\n0OeN\r\n=dWoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/typography":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.fe79de07d.0_1581636211965_0.43631387989910264","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/slider","version":"5.0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adbe6e7f86f7ce7c7fe8c5fd76c5bbd0f4b3e24c","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.0.0.tgz","fileCount":35,"integrity":"sha512-K4lFe/faTJr268EgUdzUINl1LhkBgoGD2FW9IP2Yiu1iai5baQcg3j45Pb+zAMMJBkerMjt4ByHm2ojuL5t0Ig==","signatures":[{"sig":"MEYCIQCBt+PsXzX0nSmc/PA512jeZOCy81BIIwN8E1Gr8b6FTgIhALO9OszZZaefaqQoEPJ8vSnpB7sDKFZRJbIoZaiVCiu2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUSCRA9TVsSAnZWagAATXAP/0wPDmdgtL6xxfyUHJjg\n6OWxoIIQPrykxxiQPjOUZDdAGJcE1+/wsEAP4OkM3XFlkBGlNFryHbDDfgnt\nZA056nVzkRl9QcQwAV+pJOI0B28g3MHPPIb7/3EbIGStcSljMGBJ06wrtOCE\n/137dxtBaw1IIexxcZK0SA/hAVsm9c5DdyENOYcWWfoJHAluc2+ywyg2B7mB\n1nVrPOFpsSGBLWqFLShXVyAnr37wg6w7k4o+VIUBopxj0sCJDJqAUPlWKYTh\nfPju77UOnMaeV7sXgv6fTJmhwXRoTp4Xchkae+ALFF/QPX18tPE+IdJo3bt0\nUUKIzjIc6g4L93+w+yYDWqnxl2CX+hzsPwQYQ7yUepMNJp7Xf7LoJfsXl07e\nWQlmVkvZyUT+XsipJ87CNUcIXe2gc6cqfxI8+q9UKo4vzuTetasClyTgiREv\nwVUfWb6Oco7Ra6guZ7tL1ryVSja2KLlzvgmfX5uurUYjr0+/DvwRtOwkhfQC\ni8qkEW7CI98KsKKL0xrWZW4INIHEkbBSyz1XMhC1WOc97fcWpBiO6w0UMiW4\n5hZoaov5ASzd5HRrnAwqjprmVi6Ri0VkG95YIYia4qHtBbRfXRu6bxTXooUD\nvWx6AMEGZjBEACussf6nVxOq3OnughOuPKbFs98zcgyR+M5pbw4x5i9KyGUX\nFqpq\r\n=snxJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/animation":"^5.0.0","@material/typography":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_5.0.0_1581638929857_0.8151508207919553","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/slider","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233624da85b694201e9e0943a604839b131f5887","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.5e313b1f2.0.tgz","fileCount":36,"integrity":"sha512-e1NPjix/QUqFKBvXlnvqihin4KDpx/IZSZke5hkMF0QnVwnVkt0NGRKim4wGJ5ZZbpxpL8vCIgth92OPW4O4Nw==","signatures":[{"sig":"MEUCIQCyZIG6EJRhHDVYVzbBA1EX1ZLQdcTVQfE03ExPvYAnnwIga61S6J5NCv0vxqWAxd7OnzYaAqSGd43uiHXTpOqdWJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":358907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzG6CRA9TVsSAnZWagAAjR8P/jQc8dRuNYDuqNzMHV5+\nv/fVz8faRzxtDPXQz2C1x+snwZuQ5eP3vDWc/QAdItMWkwxgFH0f9LgHAY2N\nCOLTAS3ToFtaUaJ5Opi+OaOxcB0EXuV8cN1bu1Ojh2p3ShuaMjfuudXLKtJB\np8RZX9NM5M6z2+FVwjFxdaATv/Hr7AFpJHN3mBjwYuZqwF0d/twGbHVZTgRe\nm7cyaMydEqwvFhSDGdAdLjDw2ZjuTAV1MPSI/NgW2sZmYVmgV8SUYcY6cBnu\nawI9H/vP5a77J+MYOrivtcF/MnUADqlwmkToMmu0UQUCh0aG2pS5QbsxZwcf\nJhKcS7JxG8wPAJpel2KHOsb84A+uTfkjhmBcjc0F7zr9Ds5pWy10B5uFn2Dd\npriCye/gePHynk5G+xMm/CtiQLWCnbsm8aK5BiGDofcjtFq3ogSLkoaGuE1n\n3/NgX4oU8BxENlxvly3Y6qvivGogfRoQjMZJRq2+NfO+nUJdFORgdzPbaL6H\n8PmydqIG9uJUVscPlSUVziUDGr23gORSzUYqdHhSJjq9JWwz29vEVR5I4nF/\nS4Vcs/UfU2Yl14nTQBycMFujckQg44aCSGd28Ku6mbwQWOTjIR798XoL7mey\nzPtLubK9guPauOxJRv+qNf73WDdDdydwEHoqaaqgCGdYTTys80ytGxzIt3+v\n8uDv\r\n=R5Dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/typography":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.5e313b1f2.0_1581724090342_0.8703840803067562","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/slider","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89d1c315fb98a3375978842f164145a5180feac1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.6a56f387c.0.tgz","fileCount":36,"integrity":"sha512-BS9iS3vQn0HMFGxS7m0/HuaKwFVnsqQb8dCs6yAAQNVHz/T6Li+LfGL9F5RsnH6saop/eNgc+yVtZS5UyxoP+g==","signatures":[{"sig":"MEYCIQD+1yOORtDImyRKen18s7dAvLNfLtzZek41pr5vsE3TyAIhAINu8dxIAPoO94UwAeQ4jyl7SMOeAsBcF01jlAanbueA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6JCRA9TVsSAnZWagAAdeMQAJORksg1IiZ9CWIwwTKC\naoEVv+Dh6R5OfhOOJ/SYjL7mZhhw/uOnt1wKYNmIAHQmxg7J+U0gMJOJtAgH\n0r+9fIv6PL+IArY1i0WREtXnrhnq3O43AtYHBcUf8BZalqCnvWEZA+QjJG6p\nSzVQhRllpd34YWpJ1AOAV/vd3KTeYY6+lyaUyOcQJqp4rwbt/WcEw8s1w6c9\nY5cGEVIhBGpux4bh8bINA+fCNnOMkQ4pGoXugpuLb3yPl8WOqsfvaBykYJCn\nXXjCPXZMeRe9sq+299z9nFvrpDTGH2ayNfZ0NuiTs/lFZX/dYNyuHvkaN9jx\nK1G92sak8rq+/P6opTke0g42ezCo7a/ufH+hhSeLCvsLNBkvOFZ8BuFtDurw\ntYceLn0MzsGjTUoXZ6gn/Vl039L4GJsbBOgOjlUAySVHxXUV47ySqIuh9eyC\nrop6bS+mOK/dOIsawTZ/FiwYE3wJAVF/w1E9ynQGcNOSKRn52VY2VYzPuDe4\nbOh23ZgJV05zPjonWk3MDIzwCYtRy3TTBlP4Bhy7iefjW0LIiLXrBGtqbfjX\nCOcatwvUWxeUkEs/iOSsxOVgxSFjKNEV1cMp353raVhK0jDMXXa0DQS94fPP\nGgiEXV8ONEyGCXb4XVH2hhP2Hfb3H+aXOE8Ab0v1SkUuEIh5ZPCpvvDPOGpP\nuu+7\r\n=Q1pd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/typography":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.6a56f387c.0_1582055049611_0.760583550675282","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/slider","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fe8fca3af6f18107d0c2278e8e4c45d4d3023db","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.bdfd52632.0.tgz","fileCount":36,"integrity":"sha512-B57gNpz19ih5wL+OBs/06Q5YiQIbwMDld1GFKCkTVthtZtRtssItJQ9j8BYb6nrGQo8izxpgGjr4+Wltd8Oprw==","signatures":[{"sig":"MEUCIBVH/q/+18MA51aHQwO+QTP6Mb3EeyaiItbzwpHTmDWiAiEA75Ii2LhH5jWyODe85Osm3i7/EO1xxLe9IVMmV4/Ds2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkfCRA9TVsSAnZWagAAtI4P/RE1ggd7YibZxhXjqQML\ne2zQpRzgSCLnRUddb927YYpFtT8R1KVaSZz+zASV1S9hIu4ZsLydxjY0Rbr8\nq6Bs8X7+P6/HoTpNAcEuG45xe3lbJkcHhcFPVNPMsLiVatYJZ1hqoPBubURz\nowvBjOGAVMny10cWpjKtjETh2+Q6t9UI6Dzu8TPEnLf2rL888hjhXFxsKDuz\n0FQdhheHWFFeSVQsXiSg1sUpr2nAI3qwGLvF9+va9TApHoC12P97BfQ4Eilp\nds5gza9tifmwzq5OX2TzVPmU8Tp3br4GeNFCqyjWwn0uyyATaJwZ1V8fnpdI\n5bk9Sun0SFVvcm0kHmvYFrmcngtMpcSB92sWj994a5DVdkWRJANxouKM1SGD\niTK4KB+3igbp8QDzpHmN2NgkhQdI7qQOnIE/e+fyuweNyHKlYcd3Wgby2Goe\n05wwwYRtU8bQ+B7duR+Q0iCHO8ydlHNuLg4bRrJ1aF3qlkL0JBBNoZPNutWp\nDVcsFxDROdynNTn8AZt6gnoeXRcJmwBbnMqzOrkVmDK/2w9tOnRJxVjrnCXH\nVLsHvWpL8pp9UH9l8UsDhKTcMJLpWYcjpSkW3l35Hmx2DIeDg4qN6shMOhsg\nvXCaBzzho0TLMBpv4HbGr0n2JtXqWnZIfX90AGTC8wwUCq7kUl76+arPg3Kl\nTwkQ\r\n=Mk+H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/typography":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.bdfd52632.0_1582143774707_0.02004911450943947","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/slider","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1791431dc576cabc72220e7c52211646e63b5c51","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.ad2e4376a.0.tgz","fileCount":36,"integrity":"sha512-D9OKHvsCKoPflOK/kVF4RXtf6dqnPPu0uBUt2RhIEA34EVY1qdMKvouAA/hCZfq/d6bkCIz42rdF1NhlRMX8Aw==","signatures":[{"sig":"MEUCIQDiHHuitn5Nx9+KkFO3A6N1wdFPunitT5fWI/YvcoJlBAIgT71uBA3pAooUneggcH7ELNcK0CTN5Mj7HBcC9t4qzSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNSCRA9TVsSAnZWagAAaSkP/2N3AOSUlKv0c8cSBqML\nP0AJRuaePDfkVYZyLlzLTEURZ0GcMqxFdOSm69kQUGjUP/Gbn13YVb0GXrtj\njLpzZ8Kctp4fEnno3IhRwyXJIbNJgeLNZye+VlG5ESzUvsBDSWtc/7AtXyvT\nk6PnfThOXpJOXm6ga4yTgmMc6eSZ62zBjKCxo51674QwliTk6Vs+UptdtxKa\nZrN9A1g/UEkSWTF0VNIya0mFACCXdJ+el96njcrnpCgX0O2iKp8UKzCuDr1N\n1kGO9EzpmH9roXYgBA6FuRkK+C1u2b+tMz8DIuHDq4eTtFMcdDffvTfl9DW5\nHkRj5h9yquFE6ZeVNXPtv1QUwQgwvAVB/LXDgq9PYxV33qu6+hWnT+KWfjrf\njXZM4dZ0xbuPjWc5Od56UiJABaSVoFAksxb2rMSgdDsAhFKn3W6ZBrxnK8hZ\n3rujjIItpFWW5QEgaLJ7KqvoQz5PMteL/MzNqY79l65OQkJFOfqIdr4Q++/I\nv1dww+qEW6Ga5t6imONGviNC+GS3aMw8QGcJnG930aQqTSjlFbY8qPoPvwY1\nZ3XzUTok+jkJnLyzVUHhHD9fvWZRQ/vwaY283vn+Xe5ZQE+fuwKuIYsVpFqF\nZhqJHMOkQiMbJWZntNYMP/mJmOgJlC9jbPLhPdR1FkU1SIeRSbGEeRL+Qdec\nn2fI\r\n=vtRq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/typography":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.ad2e4376a.0_1582240594234_0.5592935110239066","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/slider","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ec88e97414f0f1639ad5825d2ab18b2cd0fa82a","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.765caef18.0.tgz","fileCount":36,"integrity":"sha512-Wx6U3+2quFKkr+pMRVa8D5MkR043kor8LM6yojUCoKxdIz12BEnc3nbStVFLXFEH7ymZnVLkAsqmN5ppaKxDvw==","signatures":[{"sig":"MEUCIGs6HWfrMDpeVot6gy70rWWPO96lgI8r9gVXfZqFI4NIAiEA3xs2UeB8PqpR2k9eLOUwWBXPur2j6Tcuq8SB0bstoe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRVCRA9TVsSAnZWagAA/NQP/jNTRDGKe3Q+YcyaIf6j\nMQLgmLNuPh+lXeogiMWe+IzSoRWVYxV7y/Ho6l7IaElQzj3DthS6DQR34ZUg\nGH+3+faNNAcYF4inqlwq8xxljaD0lKmKMiabAvce/AmbBPta1yMt6gB9Jdfr\nFR8JGBihZRrHq0R4wAYZ7d3vnL/RFkdFRnG62H4yU1YRTqxUwPvbg/ezYa4n\nwkwx5JIlE8DbVnPtCK3RQ/xjOrwHEWBOlZVAcQi40wkPFdwmeMsnlBVlHrf4\nEXcXpUeW5AsiQOqbQrqJjCfs8LwBRl0o4dN9Z5thxOoMYhRdRWETFS7XDIDk\nAn1WpIQv7exJg54lyrZFkcVEwdKjvtYG4P7bq3Y/Nb0YgXEidADqk2YM4Ni7\netrYC1ZXRitLf9Za8Gy/ZCfE4Tdg43S23rMebaynBvlhzqcxiaP328Uxuer2\nwcYFT7V6huWZAYPKneXFyYMDhgkRKOlz0TCrEMjQHXHbr7a+ipsqvVcJctDy\ngEPYwfT+d0HqgrlWy/9Dgi450uVCjyhJfWHqUWfwUHNBWAgYf4R5LGMOs6VM\nPsDFl/woXCc/2z/UxDT4i+vwjVlQ+/nPQ48pAyEyHe39wYpzaZlV8FNOrDfM\nXjszZANiXYJaeo0RWx39DCBQt63fY+nJx5doDZh6mVwWTTZeFKz45iEXw8M8\nLW4o\r\n=6VL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/typography":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.765caef18.0_1582306389355_0.057517948413579933","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/slider","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba757fcb2b6022d5d0493c034f3d924cbdeeb99","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.949562303.0.tgz","fileCount":36,"integrity":"sha512-PzAbFVKvD7qT5RmAjxh72zXc0MB1MFczTFpnTOV4O1LxdUDLhOy7tu34dqosLrbsU5dsMRn9ZKS8ur3StIigYQ==","signatures":[{"sig":"MEQCIGgqap+4ZINtZpSpol3ItS5Ophmi5Ua2QogcRUdTwtGyAiAke+aoCHz+SBwhy0iKnExfP8+aU49dfE25aB/43VsJGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+0CRA9TVsSAnZWagAA1ScP/i7o3si//1r85jnpDsCt\nmv6VcVfAOWuPJRAwOWs+q64SM3EzKKGCFEbkESm0YCBYhnriMkjkqYFyllFo\nyHw/3wM7Z1WwVK72Di7bEaBAVb95LAU37bxYQvLyRlugAb2p3e1D6VD4jFsG\n7LPIVoV0ejrsN2gMs3P/SJ4LKy/3GXX35ptBdUwMrDlKQVT2BynwYbPGsrI3\nZXDoGhKQSTEPBdcYfIg3TS5lKFPqTqKTYUooKpuusLMPUR8THEd8QB86vmgV\nV72YzDQlW/CgSf5+2BqF+T0ZBZUe7dNqAxxjUpfFMbqLOpiuL+mElJj3f7Zj\nIYtSlAc9eieoqeFUQQyPqTyFfUIRf1s0Q2PGrQpk6HONpk6jm4KsV0V8Jbyi\nb4FmItyb83kG4pZkZua0O2Wlz9EQyjtVP/3ZwwZfznlVD1MpMiRia5Ruxf/v\nywz0Gybxsaq5qi6zQUl1KWE7pNPg9JrjAZBp5ulmbM7RruT4888+gPDKKnkf\nrmD4YuZlYPOM2uwdYiFMyQn50efcTLoWiW5HN7LRue91ib2Z2zcHqOL4brc/\nuvY9GXlnb3+xi2Qw64zZJVDPkL6PaYWnwoMH6fiNcxrbYcyWvwQNesEtT635\nO0D2d/AhzZ2k0JPvMIS+dfCGyancAgpJj31yjugM4+4/X3LSLx6FXAwVyhQ8\nofby\r\n=rpHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/typography":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.949562303.0_1582317492443_0.6421017949436463","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/slider","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15ce224a2eb8c5483a29f8fda0f679a8427016c","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.7ec96974e.0.tgz","fileCount":36,"integrity":"sha512-mCVbYd1qW4j2q/7M6vlRlUJUbSskZcJkNjOBTPC6aaiC7ymCcSzZZBABnAHPVOptHmpMvzaw7U/k4hLtd4bT4A==","signatures":[{"sig":"MEYCIQDsDzegNImRgsZTvV/ob5uF83HhSjBR/fIrytI5WrHC6wIhALhdvPyvhOxZ0ZAvX3toeSYeQpNkwOnuL3JkIEQH0Y5L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzTCRA9TVsSAnZWagAAGE8P/jQv6G0gjGDc4z6VYaYv\nc0EIAkBEoih8BGw9pHBYYCkW2+Qch83DMKBj2RDLeyHgJDRa3zsXOFw6dorq\nAu+SpWXHH5EyQsys9xkKOAyoYTtM2pP0iQ+SdjDGl6jQmP/LZ1RQGGByvEAl\nF/h/nQtipeVqjoK4szlD3FODWwry9eesDUV7+jJHGU2vM4r/aZ4dJMvr8Sjl\n762bDo81idyFIcgYM+nM3Y4lgguiDot5tpi3ALb3cQfUZqMlamCdkk16LqbU\nkpVYfNtyhDMsC5Ifg9J+vLh2dP7tOk7j6vWQII3Ooph6D6i8y5V3QVqnAfx3\nh51NOOnP6R+XBnU63lV4kV27yHJVFBa7RPsmrhwWIrnq37hI7C2/wi8p/1/9\nOBtixWybZwJgYlv9oCqB47p8M5C4LQRAf4tspuH6qDx8AWaH5RQtzf9OiJZX\nRlGwO5vlEh6c/MCzxqED7gkI+U1XBNrOgpr6Am2Ql+E262u+N/imVMGxBr5I\nlcwCP/pztXfCPz7G/Iy8vqFeVUaOdTiOofWjECH7BakC76VuxFPbakWSma1M\nqyZ9OMeEJidmGdnOsWdAp1qgOIh1EiagSf/U/gPTPuTP7zkJI9XOpqJhRzyL\nDzKlx6nbOHvnHR0TGO1S1XvWUM5B1UQjX9wuHgO3fD9G2WjJm2ALkx5P4bP0\n6duG\r\n=eIux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/typography":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.7ec96974e.0_1582570706427_0.34717941196823565","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/slider","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f6e50e538119c229e75203058540696df8746e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.265ecbad5.0.tgz","fileCount":36,"integrity":"sha512-HhkHn2lR78MqUDZ4MPFvtNycKghK2q3YBuD3AJxXJD/7+wB9xTD9OxdPxaxaWNRrP/NnI2PGeTHeSAHhDCWsJA==","signatures":[{"sig":"MEQCIEhbswEXkoezRc1Xyw2GCocuYkA/XqcECii8q4KgL1+pAiA3NVTk3tTeE2D6FHcVff2U5hnIXdCXMX32Rvbw0KslOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsUCRA9TVsSAnZWagAA718P/icLzvJY3wC6TOFn+hfK\n8NDO1O2P3S5f9ftJ3GzsaZ2wp6xiowRd6rwiNx/LU5usbTTBDcCJxAQFEzyJ\n5iXaLRjyjccvPljwPEI6MUNsFqS9ByhuIeXfeAtbu+i12NIONxRGLs7OSIYd\nqKC1fHao00QavH8I9YLQUb+Bs/iUUJnjWnv/sfY4fAxtRA7ndqcDq/VPzURB\ncCHG9HOzP5ZdZ60Arx1rkyHjkyWG9VNidJWKJtYv84dgl5KLDCoBJ9MX3ZNf\nbXBscU+LMe7SO9iwkCwZvkine4qukAo0ze2x90Mk7PDiK7HrbzC+2hHq4w9q\ncFL7bnQRQruM8N4vlI4QJP0dZpZZHLKPRgoONlzWEmDfHUiCbJ5oB3dxvXZA\nKNGRzspYus6ghSuZW2LNjltkgJ6Y2NJYNsK7hVZQYn4G1XV8gLgQ91y1MDhf\nILiTkdYVyRxB75oithjKtn2Dcfl3ID1b638SSqR32x4ZBKgDP36lIQTvRB/8\n9nFVXZgzILJo3bkV1d+ffFp/6lfT5xto+HCov5vZn6Mtny06muXLAOUWaFQz\nRzj3nZ96SuwVl2VCLHI7HmgaysICL9Zfz0Zl7fh4GrueFIlffyWYvFRjE7oe\nBUxk1ftWxsNjMbjZlUluJoxDhj9tjHS7Jf7uWyTfjqhAT1834ytGd8wsJrFn\nc74r\r\n=/RZ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/typography":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.265ecbad5.0_1582664467732_0.037790526882910846","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/slider","version":"5.1.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93d2dee500752a0e85af497848260042219408e4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-5.1.0.tgz","fileCount":35,"integrity":"sha512-3+0kIgqowmUK0AXOC0jvR+8fqFJobdWuthfbuYBV+PFGBa9+zUow6Txf/yrhtCeQ01FHXw2iNeEFXSws+MYP9w==","signatures":[{"sig":"MEUCIQDJpsNy1QfOBtuvgdZSv9ejSQ298mCl17GQtumHyycKegIgOQaR1aEkLmk6Ae1dLmUYEVm+ZFwFDNwxBY08DbgnmvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":362878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPWCRA9TVsSAnZWagAAcdYQAJ711cO7iYkRdPYPwBhL\nl5AdJD+5+UsjzmOVxKpvRystvYsgqRqRueatEC7R0NH5AP5wgOmjkIdfT8Ef\ntwGsC0JCiGqTa90fdQ2hxnl6eISFdmfy84RXkIMqPfa8i2Gb0yjApbtpR17y\nn/Sm9AxEsX8C2mCMlfLmfczuFCIGO5XwyTBeVg4SpotPLy5B8gcprlAsh+kC\nCX6nQl5/nPaiFOwTdehHUZkklRHYGsX6PGwVD1PklqvGIO0Aq+8hWe14lg2A\nW+jQ/qmg9/Y461I9hqFOA18Sb0kT0h548sVuH3LWXXhtvFO30lpmwL3/o/NX\ncasdrf1YzoEm6UbxU4+xtdpqRTce0a/0uEBdWlKNne9rIfNXKJCA7Yt9xQW3\nFjZDWhLPt9Ie6Sk4jrCD5dP96cxKA9qvYd/6Hbje2kpi8U3jM9PB+f9yWhVI\n/+OiTKi8La4mZuHnTtvjQXeLd+yErRorySi/89huEQJuplHcguG7LZm85Dx3\n4jYjCHbDR+YROIi5ViniTyiH5QMj3Dr1APns+NwP/IKrq2JN1InwF2gfZS1h\nGIVWy+8SpQVoQBU8UhRka0iSTSWYegQvvsIO7XVoULvFf0c4Y/clgavizYty\nm73O7DnPHFQffqPUU7TwPxfuqjbWgQonh9mmhGNQVVWw9XTu/QG3JvrXXY6p\nsNd1\r\n=sBSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/animation":"^5.1.0","@material/typography":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/slider_5.1.0_1582666710402_0.9480864307365202","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/slider","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c97b003be4ba260c170268163fb3204d6621f1de","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.2cf87456f.0.tgz","fileCount":36,"integrity":"sha512-EcHZ/TlF4G+aZrOSN25DerRFle7+dW/wqgqFQ9HafjOzk0C8dlmlcg+uahP1LrOvhR2plPrP6i7zDLKZuTvHuw==","signatures":[{"sig":"MEUCIQD2aaSaK35FDQqcBQJreKSXCCCAH1EoPoHc8TyUj6tA9wIgCJxHfsk1eqvBVtsW5PtUrSOJiUKd5z4zaIZN1ohcyWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZP+CRA9TVsSAnZWagAABJ8QAJVztfeU9r/Mi3nmeb20\nfpJoUahS6Yjb/2gB/tQ/9J2Yqf85JSKZAsI0Vke650alyBOBUbZ/6wiCJX0e\nF4LM232QelQRixIxcd53ymAne84uc5StY7oRuvqCj7pzuUg0Ioj/MWsY5JGO\nsN4NFnc2tGgTa2xiODBvKYjOy8UlU+onNDVadFyJV2juxupjHBTcDSyyeCdQ\ngV5079Pk/UEikfAto2yvqE43YO5ExV7RZOmOuMW1iiVzLqySn/kW5fJ2LU7/\n62Fg4BdbJiZbFvsZWYdXJf3PfFkTgLPglO/6PEPSstVxI5iu8Dp60rlzizkx\n84P14O9osMOZJjpvlW/SdyhfaEsrKhis8jFSCYRQ1FjVfkIqDg3PGOvM25xl\n+zwD55rBpVQsPKNMLboC0Rer+x3SdFwknSAp1WFvtVs3RiQ80rNasrXLEvUH\n3LE1O/gjzYMNaSkzBOnxLsausngMmsWv3uyHHnsEtoHhnyrRP0QLbeKDIcu7\n2ETOMysxTIUaRZ76MflJWqEMYjGDIOpzna8C0AZIoPIn08rUO3b3lIaJcsK8\nlkE/NFrqVNtLjxbQ4WTfh203NdDT7WcHDuOBpGPecUaku+g2Fdfn+QYWhHcm\nPi0l93Am3Jo68hhynxxlqogW4EGtgO88D0nsB+cwPQad4TseIdf/EMtjLo3G\n7JiT\r\n=Sddz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/typography":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.2cf87456f.0_1582666749957_0.6074639175911416","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/slider","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12ba031c562c4eb48c9188d60352cb5642321d78","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.781434a92.0.tgz","fileCount":36,"integrity":"sha512-Q+J12kgToq1Eb+nZyHcszvycIlb0ssZGhCtG2+006hKfblESoP9h6i1oIcKa/K1RqcM4NBuAMTvY6h0iMcbz7w==","signatures":[{"sig":"MEYCIQDdAmQTmaX5F/LLs+w0XRO2ZrTjWVoClfjN2a4gsPZpvAIhAM4jpcffILG5M17VRy4I3NNq0tthN6Jg3RUYT6MCwIbf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2ZCRA9TVsSAnZWagAAnVMP/AiSi2qeyXssC2IrHg2N\nXw7izrIzzInOmlM04DVJcdfTg4nCYe1wbqgFEA7+K5QOhgBv3j9V+3nTnWLg\njkH13Gjj47TaFCorr5ZUUkT++9SmhEy13WEL67/WWqGp38xwd7L7xnQK4MKx\nt7jU0BkcUTlWypmiPnpUKi1KTDpKaPFuA1oX06NsJhCww3vrCoDju9PWciq4\nfzy4Ml0dl+AEXHB0ANGoRSqVKyuOYp047D/QsylUUJ2yVcPS96nO4CsLe1m6\nNH2u2EZqowAc3CqkaxLazJql2OhTje6VgBc2hn0onuL/9LPLq8OkcsCZKJrl\nUPhBTKH60ZPTLlCYZoCSewHWpZvxZ2NZKF+KXNGYDaI4Kw0mj9Zf72ITTnwW\nfTb+wIyC4QMlg3UTi2YrTgsPxCPkT9UdBV4MTXz4D3nlhVHnIM1nWrWul/Wv\nm2eEwD/kzbKLpIz3EyUOm3+PKdVQvIuP6/mi4UIbazgW8TgF/WBlE+ZIkLT4\ngG0lRvh8ajjm0+qeimToks3KxyTiz5/WqjkLbTRvkwA3Ee2dghInR0Jh/1YF\nOsdYTGt6qSivGZ6/h5npStXiMyvmOL64vDINul3q3k73EC86+Bm5R1Pybuwo\nKaphbuvWy1997BhNuAgBScDPMu9gCN67B2JbzatZzbH+IueS3rVOBc0E4GRI\n33On\r\n=/XR0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/typography":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.781434a92.0_1582673305491_0.6615933995436725","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/slider","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7929d7da14bd101006ab8f1a93b8abfd7f3ea71b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.d6f60c98b.0.tgz","fileCount":36,"integrity":"sha512-wRUQoXHg+d3qUdayDcp24MYT2WdXqQsAQvIUOndmC9BzXgSl/D7QNCUeMH15m5Kf2+Xl8s4L+b6n0NnIrRSCZw==","signatures":[{"sig":"MEUCIDg/EL5K5BxmApcTJZnzi/9SHtU5RndJioqhdrK+hHs+AiEAxrbssFchCV+tZ/ZsgBWdsqbXBlm/f5jXrwVW30GsCRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":363397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY5OCRA9TVsSAnZWagAA5ogQAKGwge7W0DZzbnExt2Fx\nxQfZIZdWS36cfAw6N9OAyrT9S5FIw9CEellXQ+hzo1zPOP5epexyKtGdrkBz\nAR99E6eYfhIdbZ6miYGd4HyE9hz/caN48myICRQlIjpfei/C5iZmP0FKxAbR\nRxzthJqeC7Kd3M2pvFBV43RmHOht9c9wkSEb8o6GH7cOAZMLpUZDONbUxtf/\np4WvG1utKXiWPzAlmk4QfWshcnVV3IRtnnMIDcMs212NCQDuvVghGioC2/h1\nTPR9iJel+W+7Zqp9aNaL1Cyh7fBK6v5uiTqrmYb0Fqic3O0+59AjuffP9PAI\nJuRl0PQlzyaaN3dlGKulAt2qrs3bTniY7awyNlyUqGZMeB3ZnjnocKdEbRYc\nTuXd6MfZ17CMHWRMsTrSucwRPGIVWM3/452yCGSGa/HasVIP3um+F2WOGT86\nHfI7NJDkkiIBUoPlajFG0s6bWsPz9uaYldWChoX0AlRBZIA0VaKarHnvaeP9\nQHhaJw8bBvsCZ/xG+ZRPMzZJIahysQLadA8/nPKwhovbD+KBCX45E81UYupR\nhvjz0ABCsrYHfo4moFtfCdDnZdOsv+7zaQjao3gb6jS3wxol5P2sG/LHoVmB\nefwfg/07vessLjX4HDYWXumHxuo/pO6kPB5H6C4tq5CvuB8ifo8uptx9mp5Z\nqEBp\r\n=Y2sp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/typography":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.d6f60c98b.0_1582927438041_0.3608677978048844","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/slider","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62f23a92b856ec006b22669e08484da69ade9cec","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.69edc6e28.0.tgz","fileCount":36,"integrity":"sha512-M62LAAlvq7EaxUZLAsHvj0NoYb59OODO5Up7dxcxpPFG2SZUxLeTj+E71WKivkUgTM29fKmSw46OiYqwrXp8MQ==","signatures":[{"sig":"MEYCIQDxsiBCbYM4hNdarHC7NtdG8cjN0Esd1xT87h6NIQEmqwIhANFw+xvihQy2Hcr0kOEKQRx574GMGVs1ii6+C4OdWvcr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBSCRA9TVsSAnZWagAAb5AQAIvbzlpSioaF8n7noUxR\nIgnV+Zcccsy2Gk5qjvZWyQtULA50yqeWCbVIlVURzM0aWK4H/78k/10t4dBa\n/wFmP2kxq8rBaaDj5zcx3Dhs4BjvlQtQx8He2KC4OME6uAnIgCUABHPmvDd8\n6OLXLdlfEctm9Zo8VWqm11+iPyWexygv1qDcv3/hmEsOPfcdDIEzMR80Zm7z\nBjtg0hsYZqEbWGawD53DfCUdtfl+k43v6vYb0QeV06GyOmeuj7NVdg0a8COw\nCeH6nItHuURyYFOenKJ4eHR4F5ToLpwykxIWiQg26B4byA4lE7t6XiYO1XUe\nUBRQM8F/hmXKoLSDFohr9d8u+dUJvm1SOX9TuHxoNe90dtMlirUnqg19oyxS\n6df3Ec6y8BKse/Jj5pFAWPqBaqGLVP+9slQD9sgOzmzHJ3fmjZcMFksD+ki8\nTu7XEqtP73WMvgQyc4TBipL4nBtAFw7MYbrwRNXn+HIzuBbbjQq+J06LkaRL\nUAllrN+TwuMfO4J6Om3QHtq3tGYb+sO6pS7QDSYFBQXnBBdyI6ZHt3keZtxI\n3zvarF/xi1mU0nmCv2/iEPciAu8tvcyTDPhX773XmBPBNCPAwKtSBMHQU0kl\nZXhqy74+Jugmd1oOP8cnI+dNZaGbSwU1jvuEjnMDwRhneiavDIXPq1dHM3bU\n832i\r\n=/mB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/typography":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.69edc6e28.0_1582927954189_0.975347538742869","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/slider","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60b3e59aed37dce3214c26d4c1389ebedd0ede84","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.9372e4939.0.tgz","fileCount":36,"integrity":"sha512-3+CIQwvk6Fh3psgJqSfey68bCd1gNMiAgGn0D3iLr4LxTHJo3GPE27FL8mJzGdywOnBjAUtczdjnX5znR3ShkQ==","signatures":[{"sig":"MEUCIF9oLrq4dx3NAIi8IWZnWj6yrJbxFPKV8cQXX1rCxhfOAiEA9Zpgv6Ym5O0ASuJxaLhmtPzrm1F4of0DALhNPczV/q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvCCRA9TVsSAnZWagAAa8gQAKFf+NIXheFDTbgD0c0x\nK8wEzMnr/z3CediViUbgR1QFeWCuQEJte/lJ8+HaYWA9ZA4lBx//fr4U6CIX\nECl20A0W0AStxlsd1aYX7GB8RBNDTa8i//VNgZ8i6VgDOofZR0D6//2VzVND\ndbTri2xrkNJ6uFwTF1aWwAI3ZHrAPd9du/Lv2atY9ZBvqC7YJHZFjze/Yi0d\n04I9CoBFd5qwyq4aZLqpbg+FECPmjqoO8X4PaYh5FZTnrbIo1CvgGmuQRJbO\nP39QrXpXI3Qg9ltvfsHVEII2Ht5+vPr/LpQVpiY8RHYZDRShDsKNFqlnXoce\nKq4C/ryD5hUnGHfqMEIdZ62q0ydVlHLT8AGOewQKeLBksm8sQm7tWhEq/7Cz\nJdCxiJzCrQqYVoApkD8c1jZANshb/LunhEDpe9nBD8feQXTkGw4L/VHklwtY\nV4gySTPl/128s2I0dg1tOKQ5xot7ovSKYTOUYEO2U7VVQE+mh1cz78WXcMsB\nP2ehGXNU3EzgcthicXLDJuGzfT9Rwy7GAXI+yFvjvOt3OvrVhfpAjfVMV2j1\n9gSv7xOubHIEnz4QUrT+83qwttll4DoHNXychCmzHRBKQ4aQaeZ2sctKmxoX\nFNRMqTk8auO/7/ggj7pooWv0Dk/MwD/olYVYu/rCqvIwdgHzPWnvRSM/EDQR\nwdr7\r\n=YynL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/typography":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.9372e4939.0_1583262658418_0.5310740029757293","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/slider","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3cec91b7a2c9cb287e2433369979d65f18d1ffe","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.9cf5e9842.0.tgz","fileCount":36,"integrity":"sha512-3CuoVfGzth8U2dqOZn3xRtTURDdeJjNnuxYlAtGJ0usRV5kb8IJzPbXGkpqF0wz3wE4E26Y+ntNVHV4uBqjzCg==","signatures":[{"sig":"MEUCIQCtS4Q49FwyJmrAuP3IXKo81FUQk5EypIa/XIGuw2HhJwIgICDBu8OYWu3CP1vZ6/Y81UytJRic45KtXaAnvXUMQkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXuedCRA9TVsSAnZWagAAR3oP/20p0C1BlnQeyR340mWd\n7ilkJnD9fcCMU3TEbiCkJapscDLJclAt6ODFxk7K5wiamrFX0CdtEXk2Wxym\nieTJXrOIkSnIW9Rdx9NEgtL7awXCpE5pflQS3yKxEhAafVTwW9AoVHsybrN5\nMOQgfyhNqw5Ut/aT07D9sZJ6CGYLrb1TUtTbRbiqMmGiRXd44JeS5581v2aW\nZOb97KbEs0+aFjHOMIIlswdtxJ04rl5SOI/outPRt/6mJAgqwisALm8z8BcO\nUevjS0lSxXD+kgmiwoacX5yKtaQkm2Jdta9FELHaqmTukFlLxexZYvItLKs9\nZVnqJXy1Ap0G6vdNKFw+BR8ciMnK/4kxyCgrv8ukqyUF8jiSOu2x7FgkIZ9L\nU9uBst9IIJyoqOC36jDgBbEU2TcuxjJ74ARmG+scALk8cN+sJhjNyzqDiY5A\nLZLUqMfwXL+VK27Ct81QPU7L3sPvfHjdrsN1hU1n8EOjGimV5/zapubTpTM+\nijDBvBiPiICX6hyy1fX+rUGzT+3UMqcmm1EXihAQd3oXxrn0UoFVf12aX/+A\nAYF+0sXBWlfbDrMh/obVo0s3azrdY//BAUi9Be8bVW/iZ880qWEYlz2hs662\nqE2W7Qc+UKA84ep9elCF+661k4aw+2NLR/tZ+piqKiYslcismdWg3rspEFTz\n1avE\r\n=ydhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/typography":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.9cf5e9842.0_1583277980161_0.0725561149380658","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/slider","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2df381ed2dc36b86be6c89efc4994fe8046d0bd4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.3657f8863.0.tgz","fileCount":36,"integrity":"sha512-HbGYhrD03P4VxLpbOEsgXKczY8KWadrxghFY8DNiY24pLjjA1eo8r8R7ja6mofkb1Ge16vTVAE8oHH6QgS8iMg==","signatures":[{"sig":"MEUCIQCdyjc0dwIPw3UvxLZ66xb2jbZ0n+kEDbh2kx0pjh3cBAIgVDSoVHvHS65xDAbyx+nfwUCmqS/baTt/Nmb71SsrxLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kBCRA9TVsSAnZWagAAoFMP/31qzqNMzUJtuJudVq/L\nG+lk5xrWfUpE5VbrwS5p/gFPBZnAnqDwDnnsrnUjfPFX2ZVrkKzph6TTD0kR\nSncWddKRzxDf9nY6nr9RabKiv0liMDk26ny3rAI/IM/xmIfdb73WUTrD/kaH\ngiIob6TtuCkwHHSrcHrbAbCio2V4NrXDXXmlfEZjdfcbLZqWBNE2yCRjGPIj\nt40ZJQUAWGGWDbht5zlH1CZRrUDSu246oI6hf3oELY4ll1Uv0RTafN3xTpEI\nluPKvSkSAnUFF+StP66YbLXUtYn+S2kw9b+2ELHUwPz+OWff3MzT/ZHYy+h0\nuS3hgi/KahFb2oYkv7ru1Vin8SJ+hZ2+MvxpUjNslY2EM3WemowJm62KZT7Y\nYBcexpROQj5/5EqKtsm0JsLHkVlSAsPn9Wp2+0nYnBqiJ/Dk0vSCVErY6YlB\nDLBhaLsvEBaAX5p07pwrTo+9rGnDKAkYikyDpM2SgcaTy5KLzBLsI/TCFn1N\neZ0kGBEBiKp97n4Fdibe9Jj2ewaZIJYQNsjZB2bTgJdi6sjVrHb0SepiYwT7\n1pyPE7QuSWJoRoA1QuASDubhmwLjCbkHGdQ/eYaR9VGbgOoBPyI7Vrsv8WvY\naubFcwBJ7trvt+fj/LnuElYbWR1qyWZRPQggpvCJiKImmURdbuD3TdKhWvNJ\nT5ZQ\r\n=AwZo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/typography":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.3657f8863.0_1583343872831_0.5084985160978286","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/slider","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d18e0edcbefc9bd8be3e3d2a458b6f491daf9903","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.98b843417.0.tgz","fileCount":36,"integrity":"sha512-j6cWLpDi5wD6jkX4N/pxPQWEnH5aVo+bLnuJxncVi1IDn/9g63mA26fIVXYl690WTmn480DJkQl9Trd7Bh2xug==","signatures":[{"sig":"MEUCIQCbjzP1BHoF8bq0DCH4ovkPG4c0RSuiQySM12ECTFl8MAIgVLxMxDPVEKohLCtcCNz2tUVJ3zs8CG+77DlC1SSKYyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUV6CRA9TVsSAnZWagAAeaIP/3XAQIZj0Yl4FiZTVfkT\nblv1v+tt5soaCOXMbdrJ8Ymn6/HoproqF3oeB+l4CWMg9XfvAlmcuhUiPMMN\ngiRC0PsYEBpuDxtOuBazTPJ4IzZAPI0GzcK4Pur/ruZYKfbKUJq14lvQEe4U\ni71kicG2NVth0KEkay2uDXcYdVPhtQDCrB5QfOnPJTr/7IaMokaceHy0J7ZM\nggfojuVN3+as9sMh+qUyKlIQ4W0mTj5G/ubdfZ9liejAsksQD9AKDHwiwI7t\n9D0pqd/BnNnbnkcP3Pq/MONTftS0W5YGXeTdShdbmJt2dv1oBgADEchrYEV/\nqlAw43OIwNv4zzN11R75huXjZXfEpKV9aaaGaO99PWenouNcnTioHCYoII/I\nBXPletGAaP+WEu13oWQnqFUsGC8DBVswtCulUEXzlcdw21ALpEKCcFuyAt4r\nrkPn6bV6KY7JYN9ml6+wbDTy8uLFIAIKmmDZwArS+UHEIVAH1knNzm58G4ZW\nb18B6OgaCl/BsYDhbbiYT4xwq7Yl6oQokv3s0IfDLxdiv2Y1NSfP9K5i3Eig\ny9hdMNyPNWBiI/S3ecGll1iBDN5wde2CtPX6rkReAzaq/9Z++yI6wPi50KD+\natSSMavF8uQgHqRz8a6KDH3DSk5s24WDcqkJanqCueMAES7k3Fk8OepBOTnv\nLm1X\r\n=Zz1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/typography":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.98b843417.0_1583433081802_0.9432021204644372","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/slider","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cefa8172968229b786aed428d16b52308ee261e7","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.17b9699c4.0.tgz","fileCount":36,"integrity":"sha512-PDOzeRwjW+G21BZcyHVz/9aBCOh5haTE6inyw2toiDDxLPxiKSU9W8bnVQjXIlJVJQSdrHDnzcBQooF/L+uXtQ==","signatures":[{"sig":"MEUCICsNGHX9eobCcTZnAZrJZLzqgXMFV2h4Ho7jk7XASiSvAiEAnnECHEudJpGZwxzv8m5v44ZtePl2VQEtv/aeQXR1wPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGACRA9TVsSAnZWagAAneoQAJYOm2zhKXTN4Oz+Ij4w\nA87eEiAwiyyPZtUNTgI6GJwcOm5OKZ4ipamnnUgldCRJU8wR3lDpsG7gN3Ie\n0enOQLbEQWORRrXHqsBmsaFdzFdWtDr06VDvaJZ0M8JfueOP7X19gBogHvd4\n4WrA+os81ASmFfCpufqHJaDmMNHk1W0W9wtckUTxxE4uYk5md5l7gjoh3s+Q\nAmCGDCNGDrzBZI+Ylege6IpbJwKrBgvaODOxyUnU0eWiUVqxJ6hvj0AD56by\nUE75tEijDVWCRGbe3jfz36IkTIi01Sa5OJ3mKg4fgHmXdSFOYm+jfFjceNd4\ncK4RvGEI3DT6dVc2HVHHtyBGeKu/ORE9rH1PNRAJg4/26D1waYiboVicsqS3\no5ykj5zBBv6wMZskdu+iUd87LufP947xK1do/zGXEQpeF4DCik37OhRruvw9\n3ye3OV3ARpqGtc9x6wpOI/jIw0W/NPGB3yK8wof4f4xZPmmMn6ZZ2BGNo3Xt\n1V9F5xeHX5J3Zb5ym9tfmZePi/yL83/uQBtil9R6vFTFFbayUfP10Os38mHx\nBXG7zrlJ5UCyy9R0+7SeM2FeWfVqofEE8tRqn0Nl+BIi+rXtmLITnUrZpBv2\nDpN5WB6ipELBneZN9yvx3GPLYJMItWF64o0XXr4yJGh6dD2/aWGyn3JAWBl8\n0wzW\r\n=25rP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/typography":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.17b9699c4.0_1583436160533_0.9336411400221862","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/slider","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99708aea5c0c6b093c517ba663484e13d5b82806","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.6ee035572.0.tgz","fileCount":36,"integrity":"sha512-IJeGrEFqkunLOvIY1IrvCC68SZa1j5ITwUzqo5Uo3OaZ0ENOOnq+nSHnQAvJjppNCa6H3QDLcF3GAQz08PFNWA==","signatures":[{"sig":"MEQCIB4Ls6yHcFwlH//uNWbcrTIzTGkyKjBa5MweLG26aTyHAiB6U7GniV+rvO8O5HPa75k0zCoTCrvUF197SYLqSe/vSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnMVCRA9TVsSAnZWagAABcAP/0EKL4uTHdFYAIhiRnJt\n/LJgNm4jT3uuvmgbWMRfiKXqIBXDgvdb6L8x/DI66/5F0VDg/S1yFar0bbY2\npCZUsG2wimjJhc5zk4HJBSrdSRmkiWTnhX8/eVRjndgZf2LwP+Gynx8g1WPB\nQjl4HtU9iXKfHquucYKJmSsB95NrJS0TzwnooAr2GX7TDubM3kpQr+P7t0r+\n0jpGwrijzxp1/wTmVXr0XbGxqx2mKO7cEFhE8gay4RNDpy+SplDdHsNVUplE\nl6NKCJn5JW4Hssw2h2QIEZyX2NIBV+QvMy/By+TR+kQsslDIGb5kuJNZeNhS\nsP3wFErufZXWLq6wiA4OR5OwuXdsNH4egZoH9RFypk1o/KqsVQpAHJwgLqtb\n4glfcfpIxS3i2KIuiCG/AVNn2qI5DPOgJ2ZcToXNs8ehjF2DwJV4ZQlJmUbk\nJ2c+9i+LhldptE99yIMoglQ5l8wbAWKU78THPAGm7z/Qhm1rqt2E+5Ror8ox\naJDhFStnoP9GK7tC3XIBRdRMP/GFjrX/TmqvWf+iUw/U6FXYs9Q8m+Bax32T\n2ETqh7sBmZ76/WAoNxSst+Q7duv0WNEnEoqNX1r1VRI77hMWA0BJPS0OQaOG\nZ5P6ZaVwAOUjF2ZzXywy+AsZWtvSelTgUOcxe+QCeqUGIu3pQ/QbFD6KHl2d\nVpfF\r\n=MiI9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/typography":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.6ee035572.0_1583772437507_0.24163054938755324","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/slider","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b1614f0001d2bdbc34f4a45fcd0f8dbf83652ee","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.bd33cb56b.0.tgz","fileCount":36,"integrity":"sha512-mKYFn4oEPB2duMCcw3iCtQbDYB+UaVLElyecgZF3qHDglX35se9eNYxOnOzvqe+hdZvwKHrwWHMPFVjXnzOCSA==","signatures":[{"sig":"MEQCIDrcLUrjJ2O/v3hZm65yUIkAKiUyGhSVLUWWQ3WVpKZmAiAPsguRFNQKGH0UwngLhcfTmhBMnVD4PEuVhIrB6RrTog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZntcCRA9TVsSAnZWagAAoCEP/1T6FPJn8pn4NZ/I9E2z\nOL0eQrxja46i+jmr+c2DiHZD4bIqocE08VIz+fhmdum0CpOLfzW8jVeWoh6Y\nEmwo4JosJdTKL7htVqvjJGza4MMAwtSxiBzW14196UQcjj4nxQfaA/rLZdKE\nYhitzr4waC1ph+ojuuSd9wJmP6f2Iu1iIY8nXebeDMEOVbyMsGsXWDfhM7i1\n1PeggaHwyMm35RPL9T1vM9dcNrIr5+TlZ9xY527XUYJabCscD4OrAUWvwIG/\nT/r3XRYeiDw4hMzTXKtg5QmRiXsX8vxI1IGhVsZX/F+ZwGaQZVxqeOMkdy97\nkEuWAhPLpolT59N4q8MaraLKaNfV6LHfB82bC78deQN+eCG2U/LYoYzD/xMJ\nBYChW6vNgFlHq7UmVi7wxep9PdZktrFqRyaKD7p1ODkLHSNEhejpm97dcXRu\n4TfdRg+N4pVLqiGLSGwTvyzQLhe4/BBMuX8HAyAxl/PAR/ngNwIoJT7N8+p1\nNsiH9JjJ4+B19aQzctNuTlmpiiD53goPsxnQbMwa8Wtw7luZa36aZrunZYd8\nwREFFMTNXJTJX2aBZqP92UBU12w4R4XvkNHgtQcATDIvZ6V7yv5IFB9qp1d4\nm1Z4ULLFDmAmwrabcUOfvBe/amhdZM9MwQKe7T3j3/ypsJo8ixntVMzpPHfx\nHRUc\r\n=lhdS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/typography":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.bd33cb56b.0_1583774556096_0.8322963192054398","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/slider","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4302719f0837e9dcef9ff4461412aa5a51ef17be","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.26c049afa.0.tgz","fileCount":36,"integrity":"sha512-lvM0o8Shb0wC5AAL8x4huoJ4vE90lhGUkd8lQqO1mEwpdn8+pDy0W7bd3AvhwC3iNPcTqyWbw5w82tHO4mrCmg==","signatures":[{"sig":"MEYCIQCIAd3ZXf2zigFOnNdqR4BTYbg+CTmBzQ1X7R55X4pW/QIhANO3217qoGsZEaecH5RA3pUid6BXssC2aDwUso97eD32","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hDCRA9TVsSAnZWagAAKYAP+wUEB/13IkOol+u2OkuK\npGyj7FfOoY0J+qiG6BjUs7JBMcJqxUTGRqQrPLawC3aT4GABz9901mgp94WF\nh878G/N4wGBNuQ52mb1+clIX4MOgQ6MRd8KtHgiZq0W+SIj9m7N/xXWt41m7\ni/WghPogmAGv+sKKCm6QPR5sRTjTSDvhOTWb978Jz8+aCFzvXeeO7STf/UfQ\ntfZLqCy/neXk69O5PEUZYHyZQApPikMcvwCzkVGqK4Oglz163U1yvUOPYKCV\nZ39U7/RQRL1+DSPwlt6aNpjZixGaHfvVuX1k0/tdmVrWi+BNS1vwXdYCxlKH\nNtQAeSEX/WbhTQk74W78eJ43rD/b13E8IGbPm8cphfYaldOI61IOBdpsP5Lm\nWUy45izjF9Ab6d73+uIUx6phsrG63IWwQ+xZcjBwkhdclFM9mELKHhWF8Up1\nKvmV9N/3KcTc19FydblyEqpC9oNmj6ZhqfDB5edygTF8qV8XKoqXXNciqQ4e\nroyIwkBiuG+VoGRWUtsiBq3kSArm2kAsTAQfxYmFoWnj673hmCVA/YeiPH7m\nKtN5Y3lhapiMA35noaK8xFe5cGtK/Dz0Tp9dlbxjqV01O+Vz1G3M14lrgfP6\nt6EQodQb4h7g6BlStoqYPbYzH8aMoeNtMaDiuji+Sohq+zTIssQZhlkuco5I\ny/qI\r\n=V0Fc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/typography":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.26c049afa.0_1583859778941_0.9276284680950351","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/slider","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cff1723659dc57be302f88fbe4e3be377c333c2","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":36,"integrity":"sha512-5Uh7nu6d4GZjC9mWTA08RYOvBLvaWZdO+0dAplYJkVRIuUwKmwG1WGWlcRHGiqHXrxKLg+UiZmowy74oCPsvMA==","signatures":[{"sig":"MEYCIQCge3VYBaA8DBZbgq9tDnXC26tMhz/b8t+r79MecZ/wuAIhALmsqZMNOWoHt01VXF+XDKj6CWUm3+Tq6xSSs8HfI3cC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qPCRA9TVsSAnZWagAAU0sP/i51t2iDs64JJC2/c0y0\nffC54KTLSk6LqSjXOcng9/KwCxXWO2EtKEY8NGaSsjj5qJ3D3mjO0lNexhb+\n1Q2fI6FxwQvFNMlrZeW3CRQ9wEQPwIcAGKE2o92/OmZwNPJezfu2FqqTXcBM\nWWewqswKj85GNmwepSBTA6jUtHUgB0y5A2BIRLWeg5nc74tRRHh3smYe1wH8\n2qrHMbllS1XLmDkvY24nlIn69OriPTFuSV0o0Z5wrYOnxKDm1dU1cidNssK6\ni3DJ5XSE/m+t9M6JhhFbPkQ4zSPwqh89COO084yDLn8A3aihQ5HIuwjTrN+1\nOzd6Y2UjAYZsP0nvkLhgLId7/QQ1ZFleSPyp9RBDXDu4DHxGMk3He8Idzv+2\nwJBDdg6BVgDvNesJb/nFsAbTvVhPHBI+CoS2/zv58Xtmk5wIBNo6mPqr1JBI\nmJi/DyNMrLSeSKFIqzZQoE/ZFMzLxJ9ShEYrb73Qr0JlTeqf3wGPHZwt3nOj\nJ2MH/wxkHc3vOmcyfEpJrbjCz4p5MLaFtMgIAKtQIXHOASvT1l7GPsie9TVI\nEukIUnbZ/ISoP8AShiaJTDGecXV21Ld2/e7dEbOrFaRvJ0ioXdHzSQI3Q/nY\nNKp9hcTmRnqbsiMltu/KYVyfH4TDBrAueKwqYpSAZexbP5MLhHpDWZY2f0jP\n7/+a\r\n=41Ux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/typography":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.1db5c9fc8.0_1583872655304_0.9966486116991495","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/slider","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a458d562069057cfdb7371f2044d312e1727f48","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.4971637f4.0.tgz","fileCount":36,"integrity":"sha512-2sJ7iyoHtBsL5w+vJ2rZRxh4BNTlD2WxWGE89J4JnVqG9/8N4hYtgukrrshXeRmPaHZBfkPKL5XsdmJjr5Qluw==","signatures":[{"sig":"MEUCIDKKTA52Ql15R6sL5jvwMztOIH62IKti2sRQzdAZdcBzAiEAgGlc1mkiAGsrw55DCJ2rFKluwIUfp9cQQPy60CCilu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuzCRA9TVsSAnZWagAA9ksP/jM0BKsOXWVX9eqIBVlf\nIR6AwZ4bsoZu+BDvByQOSHnmxG13tnWoy/ET24D+bcSAkwmRs3UtTAG7eDgv\n+xl5IwCWpQFbKtGzgRw02o6XXwukV5kZwlOEFchGbggEP9gmHBf37n5QHzaF\nNqHJg9BoT+gFE58py0er0peB/wBBQMF1EbfHzwJx8EqAAAC3+AFm8VrMnCzH\nRb+kbArCbakPhVvvMtTPjs8Z4TNBGWZf7R32iqHtfAsanaFen2lPHr00KRYM\n/S/t7H7KuL4G3nyy9lLEspba15EVHLulU1+EB9+r9YxI8DQF+48JQmd2fiZU\nzSKfxqz/bxZY0H0ZmiYfV2RmfUNLUG7gl1v8yBiDGnFGjEIpF9ivtxNq7F68\ngf3/eff9D0SCMG3pHLBzCoPxFUGaKkSGDnYLJwHtSaQZDaThT2JqLS42bfoZ\n97u2pmLCPPwm9SqMQTpFRqtKQos+sWzYghOtqhbQKa1F6dQt511Y5z7Qu5wy\nC0aF9L9qo250dJt/PQimEauABTj3zAEqxvmHFhokYxBEmHxYcQ/quOPsuhIH\nDk0gxRHfmYPTGi/AzJs4x+LT4WhD1J61fcgUiWTeQL39HFaV32q3TO0LUxrQ\noEXBHV4eopgOk/3HrO7s19w4ATK9JeiTVy/6HuEFHGtYyXJV/wq4zujcp+/O\nWn2T\r\n=Mqzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/typography":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.4971637f4.0_1583881139498_0.9725819175609227","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/slider","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cb50bcc6a96d95353b7fbab6d169b76c225e955","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.1ae8130ce.0.tgz","fileCount":36,"integrity":"sha512-o0R/vOqRzFbuOaWWUQR/m9DRHW/eNiP3r14VcJH8SRvqBXpuScDlcH0vUl9NBasacOkKmCPnDVLGgxln4TXskA==","signatures":[{"sig":"MEYCIQCXaAsW6KX9BE/yUQ5F4qoY4tPaKo0QL6xOC1qo0w1ivgIhANQZ6kqdhxU+wAh0TiOH6K2+LOK//Ep+mJw6KZ6+0m2M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1LCRA9TVsSAnZWagAAoaQP/3blyszMvGVXSJu+mNtm\nP/tEtYDWE5J9V0S3g7GwF5bAQItbF6abusj6AljC0TjAWmLqNscGL9yuEOn5\n8lqscbYZIHU3vunV7xAHuCbhHeebo/RyP23AzXx+U/n/FDWWFPo0eVtTJQlU\n3REF06kkM5G9AFGegQr81NN2j0Ra8hpYdoQxEeeijZuU7BUxL/0OvsABs/iz\nQifU8cWH8zLpoxyykqBity3RV/3I//t9L4AXsN/oG7LqkV5a2zKpN+YcoxNo\nV9Lk9P6ukGJy/TGMhq8LeY/idbiZ4WaFO9fwQTyVbJZ8wY6XrHpUcn7ALlsX\nqrPtbEksHb7RNVi+X/d4Z/8zVt7tRCmgyCshHFAVcECUHuOpQc4ghpYPAfzH\nXU5CuwESERmqNZDommLxz78TT9oCdVzf27lT+5lENzsZcNcioEqtkUqtiTK5\nLyu7UHPWlhBeMXwOmAdm97wyVsrwKAvOeY7ZAq4FctfWPJcOD3uhRdnXp3pB\nTYFJqGZHCUQ9Nv7c5LZ3OH4gpckhyblRPgTI5XdjJ5ggceWiQr9jnfFamuSJ\nCfZr48JS9jcXEs9ZyahrWcIgvAPDZz6R32rq+IaPu7N196ptcMS6RCCuk7k4\nx/3hFs9VvVFHWf2CsEcsCeXwEFnrIOfGvtzKwbNWaskGeNB7He9qkAqzCSxF\nWjGW\r\n=Al9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/typography":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.1ae8130ce.0_1583881546903_0.1414180171698649","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/slider","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745009c449abcee6a9fddbe552ae3015d19e6782","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.8639c2690.0.tgz","fileCount":36,"integrity":"sha512-A6UXi/2PIWhsLo+aa5rbGx5bcZSSyM1nzj6jRROhpdKwU07EaqdQ6HdNdwW0BexxXZD1uANrtf8Yxe5PhUcvBw==","signatures":[{"sig":"MEUCIHP/hqCJsu1mRc05da+9pE0IEu+5qypWyMqSZ6hXPXZNAiEAt6o0HZcCGJWdz4IGRtXwDPCH7MZz0R+TWD8c5o018SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZFCRA9TVsSAnZWagAA+o4P/ipRAzh+mkGgoTTPTY1u\ncgepHXfdoRtcI+CINjtPF+UBYhJcsjKL9a0EkIPxMsL/8EwSJCk+5h9c1V71\nTkWdS1FjKC/8e+NcbrgE4l6D/QuK2ovgT1FoxoD4As1CmZ8jdthyocOugieS\nQVJwVtOrfTbZz9TE+yaZczvPtvk7lftIph1F0sKb5pFfDscy/YHLH7PmjDLz\nh/3lmS0Pd9vrRGf4UMfnO6EPLDoLxxp/vmIIS5j5HtkHEEXOaJEtbjf3ivSW\nsfXnGEnpPEcx4Vv6TzOvaaoqhPtQ+RWGTSxJoXtSCdJ+yYl/NkWYE/kQaAJW\nmKa1nJ3vlp5kZXqeNmi1ag9JWvWWIp619imgBNM9SaRaTlLNduf5PEArqwCw\njHCVthrQSkj75/HpZnVMsDH+2KFqzRjmwMvWDyCTlUa+kn/gBLnxx9IBDfOr\nOCkWKsb013cW/+eiPUmXfEoQo8P5gZKL16+gECIjCYjrEX+xU1W+0WoEDUwN\nRpTXCiX2YbaWH+6U4cgb4P5q54CVHnhsvROWKVknP26tl7qGDBL362lMNkD3\nlV8S/d4xlZI4jPvSK916mClt6vFhA5J2F/VBABRqKOqcq5JPWsDDM5WsVH/q\nQcYgUK0l+Fm38LeXeI0VyM36m45AqSQvTN2GHS7rV1mtuM+yYimfms8sy4lT\nzBaP\r\n=Ugyz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/typography":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.8639c2690.0_1583908421559_0.5432065114577875","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/slider","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9af7f46c3657ebad13c457790e01c595f087d1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.d5808057f.0.tgz","fileCount":36,"integrity":"sha512-CBdW1ehSpX6Pt3i4VV73t8y7tbA3X4quZpWztISPpGxfOrva3fnOBxKUOgETVL15i8FKNLJTJxkhEcCA/p3RgA==","signatures":[{"sig":"MEQCIAYhG15/YVsO4R/HHhU/Uz3xNta0k++INyRiALZqJ/doAiB8p3CU1vYxowg7BXOCAQlnZTyav4YsAMFC7TzLJVQY6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREgCRA9TVsSAnZWagAAdwAP/jOT3IhJoyIWmjGXEeLR\nTqf77naa7M0S6o/4Be65aK1tdsth9JNcbUI/2fmd46N8iZ6q5gKZkVz+HZmb\nLsdcDOhBYUMZizHPb732JVV2dS2DwTJhiBGWtSbrpO6+ZzOz10Raa8ofT7S6\n910VK/h+Na6W+YIbPvTnOerlQo4Freofm9EGOAJ/rU/JUgpc0bN1lYXzETGq\nIWGtrSebiLQexsUbcG/y6wmiGy+wLaehBHCSjCzROQGGUOhTj0yD7rQsufbO\nRb0hoWOeepkrsjgQZoPF7az7UR86jNG20miI78SXPrvXWXIMebW2K6WBJEMe\nEcgOBixMuAs1EdmVjvAOwTd+wxrFzHJaDRn3Ygq9SoKQzru4dJhLg40w3WNv\nl5R1zh30/wt+c2t8idiaSF8SZdLerplFcWYcWkNVRh/S4PNn2sMjqgytNVwS\nIIlkLhGZ+9Mzjrh7F5A114eyYo+RA8euJOJaXx4YYjnI5DgRbeB0QVpKYJgy\ndl0tJdcaWPszmEccz+sl81F6qF70uxDbxLEBRO8Fzq3C9XuFCnnF5WerlvZe\n+Yz9CwAqLxjlB3y9CDzezZAfY7D1rRmZXpgce7+806pKWtF7i0JMHjK/J4Ru\npD+E+MM5PVbAoj7uLqd+LRHtOHt1NC/B+zlwECmVAi9UY76asvVsMXQPc8NW\neD5q\r\n=iZ2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/typography":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.d5808057f.0_1583943967733_0.19736108963876364","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/slider","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fba222b03738514b4b6b4b36b2f25aa1b4d1848e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.b3f58203d.0.tgz","fileCount":36,"integrity":"sha512-stmYsHKd4msaQZrZiHpOUKOgTC0sprDjpnMRNzWi5CeC3f28k11jUvU1NRQERVKIL6HSguCkibl4TwJvkQzmNQ==","signatures":[{"sig":"MEUCICixgTrY60EkavWMcMHulvuCEXbYzXWxNfBfQDR8In1gAiEA/Duddzh6mA+YR1YYQvNSjI5j6l8lJKQcPoUHnyzrOlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4zCRA9TVsSAnZWagAASvAP/0L0h7tOa8eNiQ4O4raY\nIoYK4VGN9pfJ4iCd4qhOfEW9Y5H1MdjL7wNQzAjCT+4bj2qB6mryg3SXbB37\nT42cqO0jymlJEf6NGpbnz5vTfZCHf1rGNX92U7lbbOBYEdWCedtEkKGO+QhI\nDnhlpmjyZ5M6w8V5tW6QXnBz1UzWvkfOryz51Tk03QSt2bJCM9M1IWKZdxSH\nJG0dEB1Qx/3nT6AnnrelA1aTLtlaaevT9LD7FoLxx62zuDWIVhKbDV1wIc0f\nfCSmoWFn0MCzFUws43ftf7SidHGbbziQMVWfmO2kSuMciQJxlLuI9371KXbV\nwsI8y+avN5Jz5l5QpQmGYYn1RUhRTcpHE2lkKbEus1cxFowAxRvLuoJqtnqE\njYfx4Z5yU0gw3vevmNQAHzJ4K2OCfJ+o77lzhbGBcmpYFnZds2JIcDTWii03\n4/dpSUA/Ms2YrQ50FixpoA12R5Y4C5+FYyuXNo25XfAy5p/+pSDK8KPbB7rZ\nt98m1/j7HibnyXte/gJdPlUSKYs2Kd4PTwoSyKrPx3DLWWvGFAMPaLoYRLSh\nrrVQKvbdapFr10h5gociDcqMTi4hB7QVWHqjD8kjoKTOhRoHu1vSEga/2tAI\nHuz/8EiqWIdfRjYz3R8/BDsvBO12E9lLgkxq0a4uv8iwdJ6nQLdvyFdxQRaO\n+qSv\r\n=V45a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/typography":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.b3f58203d.0_1583955506785_0.2497469634539029","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/slider","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b136f0e05333b9b854d5b29d54d2ed58d2699e19","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.bec065920.0.tgz","fileCount":36,"integrity":"sha512-gRUOKl4+iVtZqyj7zOnYXeeOzoKLW9aXJsj/EW+PgAhyVOLbswrdQ/DlX1wRUJu5d3LjfHP1OSENVLlLCI1ILQ==","signatures":[{"sig":"MEUCIQClczwqE1psNY8F0YlSg+mpziW7iXB4VOk48DQZc29ikgIgTkVQ1MMdQe834Xos8jV+hpV4CTcdVtJh4PH4XZ3TaMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmOCRA9TVsSAnZWagAAduAP/2J5HuaaeWUjsPcYmLPj\n/VjcX7jidfZiwlyoERMttb4FpB45t4ELjdjhPZOzLYcE0n5+SSXQmuJhSQZ7\nisZN8wCjMGEIcuO6QVFmE3XLCk2c93aQaqgdDOh1eQ0klGPSAvCEfa8wqj0i\nCFOCM4FDf6py8xLkP/dvMDfT4FIRStM0MPwmK2tj4ZFFuy7EuPRTaxz871Ux\nYwBukr8eODDufsv9pvznciG8s2hA5dxERs1xd4Mgn1wy1n/afm4wSe4HJ047\n2fc+xb/qgIP786ykcT5MRyibd8hOBcrneIEWKG9ERyKXEEAEqe5KhDAOWPCN\na7xr55PEShKaRbxl0yOm2Wjpy1tWHIEgYK79Ki3JlPvus/WtN8TjsuPVMQEd\nfGhsikQE90F7GWVFba+ZH7mwIDJGjtZPuz7OpKHcqcZ/vUFGDPOOZ5ltbmeK\nnESGASUcM6CCBptGesY8gnJY/zk7C1AVjlnLyfjIvg50bdGt7YeRAl+5ayCv\n3freLfIyl1+2SMXsk6NLSvnJ8+2fYuN2Zl+4te4BHKA3JHkTuXynkIbFnsz9\nPcwRNmaa9aWyLnHiXy7N61SPLR5D8/M2z+eMY+I61pzGSg0fIK1gStG1YO2i\nQ7qkAuKMjAjh/m1ny5stMQwhiT02BXN0e1a4DQZgq7GdEOrb7pe6qufZU+y6\n0NAW\r\n=0OyE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/typography":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.bec065920.0_1584044429880_0.7520952338160485","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/slider","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5520dc8b078374a4a5eaa103ea02c1c64d34862","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.776291ef0.0.tgz","fileCount":36,"integrity":"sha512-1c75DM6fW5WcBu8sKa3b8ja7oER/zzSONK2/BBej91668khLjQXa/xSuaXC8UjcVIqzUWb+z8OxtzoW4zAT37w==","signatures":[{"sig":"MEUCIQDQpgvFeTMpc8ghQv57AWocju8yVYtI4bX0tm/JPJ/PlAIgMjifaBncL0ODuBf0oHKAvgzpdtzvGMfncT37gFsYZqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMRCRA9TVsSAnZWagAAoYsP/1Urjt8ciSA4dyN7Vso3\nt0XcXjOHMYt3+QEP4zvX5klYDiJJWIChlQ8IcRNzxFVxCbiGrENOnOyiqAVZ\ntOHWyZn05djVY2X8dR7KmV3JbEyAthrIx3aiY8J3tSEYG+/sPe18vR5XM3J0\nRcsSiQb6nklNOP0KMq188ttSwIVkDNp5oNH10YAEjcWw8WLzI46kpDDSqwMM\n2rGkNCQgfAUWDYeT5j6sm5AVjV7eQiJSZpcDrwNinEyZBt0bSxZL7NjPcKcp\nEek04yQMV6ywufJPOvTM7m4KYrNKDTsQakk5Z2YrbGi+5wQu0BS2NxP7hy8Y\nogvu0lp05EKkGc34yIfKWhy2mq2608NGbBqCH61QRSGm6shIuHytOhkEs8ed\nN/To/VWhVsuxVK/p5kk8oe8/hs9SuE2k6zqUoUtKFRYemTS/kKxsFsVhQRXR\n2pAjXkfS+VaUz/nk+iJgZcY+eYEUK1qesd2vx24bzAGmmoFR1Z9KoKPEsFa9\nyjlTBYpQx17s3hc19JrwI6OSXyw/cv30YWdmSI+Ts0590pCz96Eta3+lHLFD\no9ehe7jwamZF7zSFZXiBZ/v0Ku/pASSHYPVWQSA9/dpuzLyjUaxNVNApg+gU\nAAuvFICMqr/PSbWVFixYvXWaLVSrJ+f9x9W5aFx+gigJVaFZTXVZIdo0F6u0\ndCF8\r\n=JlZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/typography":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.776291ef0.0_1584472849376_0.08944294117069762","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/slider","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14e8bb44e32eda309d35de788c076008a532785d","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.ece19f3dd.0.tgz","fileCount":36,"integrity":"sha512-gKTSYwWnz7GAAe9P/5KFh3hcS6Pb0E5x39dg8tgu8XdmsFVOHETsESPsFYZfhf3cqDXlK48FNwqLwxltN+Ye8Q==","signatures":[{"sig":"MEUCIQDak6gYlk7MpdTX/ytbmVONQqYTZrbYJVhvDDHgHu+XigIgCrMIG34YEh3dDNzEv3VQ8ySjMIdj9hawQXozNYyh/3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUi/CRA9TVsSAnZWagAAHkgP/1A45GEemdXJgrf6hPUq\n6N7ExoltEW/CjAgJDFc5bLMv66k+edbXucKWZTWGsPaDOguj9lTRMeqXaYgU\n1LxqX0XC1NM3A02jmK7RL6DB41eol0sQD/qPXlFawOSIgfekyHed6lcEB+Jq\nRPIfmDEi2GIq2xs1jED9s9XmAepat5NBfqtmhC+H7qXCANzAyzYSuJTeqVPj\nxywxSISW6/V2UyczMK2bremFgzaq0E9VDQ5spSAYhO2uUGIwLH2lgmZIWRBG\n8OtnydQbEMLfkLKL6X5cef1P8Q7uLnvDeZI4Saare25gvuI4ErqfyF3Zcu7l\nQZ1xzbk7NjsZACWgIdQV1zvsSY9mfsyO1ZkpMLXzLLp21m06oQhG2K6fYhvn\njcLQa+nhgSYSA2NkMUpJ5HGaDnfIbkrYOjKvbRrhiwZTYAuP3d+HnaOMiaL4\neOmmZTYvRJ6ABjeYOLQzACdNuS1f4H3yV7ljU3hWYuP2W/x068OKds6ZxtXC\nEdaWn1bHb+cMUXUJZYEiizBJv4XMPZWNys4pmkQ6sln8iooA4XDnJMGgNk+g\nNOVDnguxlht6o7erLfEL/ePBzVrgd54QY3clyY6oubK92Z5CvkhkYILAspwC\nR5f+dHvE7d15x4anof4kS438NhaHu3kKBVadI61d+E5fyRw9fWL6xIRltA5A\nisib\r\n=uN/M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/typography":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.ece19f3dd.0_1584482495098_0.16459742777067676","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/slider","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f1740f72c5c6778a4f19942cd8840e7d884aad3","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.4dc45af6c.0.tgz","fileCount":36,"integrity":"sha512-7apiq6e6UMucMcfm7K9u/d1CTXfu2JwBjpTJBM3YfrsvQb8AYqKOJ9bcp2JeeabozDHVjzHopIrh7D6r6B3qAg==","signatures":[{"sig":"MEUCIQDKEg4CbfK/HL6m4GFgN4LzyJTbtxxCsjnnxK1jzmKyCAIgI4PGxaLEvm7vFSu/pqknW8JTjCV/qtDfLRZOwrAaKpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3kCRA9TVsSAnZWagAAb+kP/1COozkuFR5aDEmgd5U+\n6s8lBA1NcsxAvl8QIs19FTRDW1ZvZoOaI5lbwVuDGowRT741FH0IpzXYBT7e\nNjtng2pd8J8juMksniKEkqn4PdvVO/kyAe23vR/vstKlB9SJa1UszU6iwwQ4\nE3/37uG8897NigPQ2WKfm7cSUg01PeN/oRAfN3n33+NdqxTqrkPW4c7GyBne\ngE4BKxwss7i0LBABpi4YxJ4sA/yOpoWWQsaeAaFcYOrda1jqJOyDt4b/JpjA\n2js9ei4qkJDwDjShvj+5gT5MaSPQU7NrajqhMMXb/Fkp9MhbeXLC3/TWwc8D\nCPq7xIDVGmVzKxA8fLgVBPWks3Z68ceKW7VDFqRsKQ0FXiWJcTf8kNtlA+F4\nOMmEz4Adb0cDXHWlvcAy33xPYjDgBH1ROMPuivVjCl0vs9CTE7cqXwsezEGK\neVhNwpZ//tGTHQF4mlwuFvs95JabfyMlAibvwZM35Sk/ojwK7y2FEFQyAbjz\nZzE2msMSxJiSJmo2qyK7rsrZbXYxaPYtYFG+1IyjsgiwI+EbSWeF/hTcep5t\n5gxZA/oKRquyeVsO9i5bsp7aV1pnDQdqYOdhSyXhhk6X7BfrjoVHf5ZBDwcW\nfx5I++VTGTnUsKBMj5/Tsefz78BvFcXgYmb/kPvnXFPMpvlwTMAZgBtzNgmI\nh5tA\r\n=IBrL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/typography":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.4dc45af6c.0_1584496099389_0.5252066357704182","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/slider","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"913394dbff5e1aa833fc63d2784b6f7e8bb4e773","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.6b48781bf.0.tgz","fileCount":36,"integrity":"sha512-8zbUqGOwdqrKOC4FZzKyh6eKT3jJURkEP3N+6P46TFK0QbYszszcGtS2wROP8S4ZfSP109tZkyhHuxLbz7QiCA==","signatures":[{"sig":"MEQCIHRvoMa14bRaD5af97/tGvoc/M2WaM5ZIpFR8IDXZumEAiBjL9PKS6T2XLw29pUFdYRn3l3wter5zyAMvhuGXoF4LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+wCRA9TVsSAnZWagAAtKIP/Rkg1A5B4V0ZukLxk1jr\n3GOD1L3xcOjII/dE+stDh6CZoYyzPTXhp1UveOjmPN+uXy3rONGxlaH0gVA4\naTbqDJS6xlZ4eG/xrCLki2g6hTxVJ5F+YF0cH5igr1U8IqkK28c5Y6ZOdwGG\nIvzG3kyuiwO8E+2+pcMHGOLZ/QfvhX+H0zAbrwQf6iF6teJHif+fapnfC7Vy\nxnedzxRiBzKsifxGTn60rYuCaUkj5dMwq5ytBPfJ0dEVtTpW7vdRH1oWTz2w\nsdqt1ZUKjD4t2vSaAvcTyVNmdh2y7sW5hIkNV6BLFWnEBtPjjTuJbvbfreRe\nmVJMWfnLBi5wA6wpA+NLJPw8rM5JBj3sNiRAGKJPjBypTziUYa/oBVLfvpBa\nxqA43eEP6HSGKz6Wj/zokM9bfTA4RFDZNfty2oXwadcZCVpwKSBGsiJs8GQs\nQtkLjXfCL++VmZ9jmOxgK5/xP/QCD5h2ckr2DCtEjaHG4gl18Y/Wq41/mk8o\nk32VkHktZV7um2Mzqp7gqUj1uMkYIpHCqcpFZi1gNRVnlOSJ0R9IGfbsKoT8\nD+4EvKjb97v0QRuRik+UDQYwkBy9PF3J0wV0JMnTZzwlATZVaJaD6vwEQhvj\n4SH5+OsgGeWfe3mwZ5Z/ZUILlEWlqjNc2TcYOuIbF4u4OLOFNjkPPG09QGQ8\nCTE2\r\n=AOkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/typography":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.6b48781bf.0_1584545711927_0.21735809274975093","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/slider","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1eb163cb2c921ff7614a2f80d0a84d75dd85460","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":36,"integrity":"sha512-fyAwf9xmGwSSKApCNUCqViRaPTXp648f0k9tq6r+X+zhgu36ed4DYXPt9Xem12/6OQ4FKkjDtxGLUMqTQFfZlw==","signatures":[{"sig":"MEQCIAfBfa+J8JdKC6Ho/l+dBLqiYtrzzkSQg5ncWtroLWoIAiA3yWNXTUeme7s+DBkJ4fFYZBHeLtPKztGzeMWy4+PkJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62QCRA9TVsSAnZWagAA2joP+gMujg8wGaiLkreFU9A9\nAv7gCHby+j0IysDq51I0bAHj4ZjNZFxo8e4hMVn6+sauyOfciPInaZRN50oH\n6MkC4ncyJGZemvwD6ehu4JzYUi2cX3njSqWpDc7psnH4E1ar2tWJBLb0vk7x\n+2pn/19t8oiXqMF+GQwN9v6/jn6nNaqi4YPbNfp1gn4P7X6eLKxDXb6KKTuX\nk3ZDuNyIn9t+IU0GECqmQKluzROInXSEnq9rm4+f0XkzX7+Sm+dhoZq29l0M\n0jLH9FRQDcejQDT+c+Gex3QZ3IEe7OcJfYoJ5SHyv9KWfrejJGWgL9CyvjIR\nnOvDDK0BgSJTJG5l4FD3MdlClh6U/zowGD+mrxpOvNGgd4ol5/6Ed2+1rk73\nJSm3nrLYCxmHKzqrw1HSgDsL4G+9e1M4nK9qtl8QuJL1QeTx0zuC5RIBtZqk\ntTKDWvPmz5IbYIgEwgB9pB5hoeGEC+mCGCkq3XjN/rv9W13sfsYTOzwo+ERT\nMAHa2pFaJ5JOpzJazaxq6xa6Jm9Nzm8d3lN2YGAlQoF65qMREJ421YuOtxOy\n5ePUk2JBENewGO79jj92kbvvK0XArRxzxzUKe05V5ic/xm44xHDdLQa94dC6\nvIFz8Vo7J2SXwKmhdGM6aa24tEy1ufbxyWFeRPJJ5+70alyOKrcrbsVfh5/v\nEw7x\r\n=NyM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/typography":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.a88c8e4dc.0_1584639376251_0.2025854451178446","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/slider","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bee5208b32a271bd44a2631e7be418bdb5e6794","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.cafe18860.0.tgz","fileCount":36,"integrity":"sha512-4p/gS+gDxHfrd8d1WFmdFgxsH/LSuDEEEewGpR9z0BnyaNTo2gM6J3IbjFW1P3nm0533datIr/r1fdKQ02arZw==","signatures":[{"sig":"MEYCIQD1lbOneCsFdKyIDm6UzL6vHGKoL4xFlojnAQZZ9cRtwQIhAPHsXlL63SGiRDmPKm6Sl1uLyLt5jmzrRmssbWKp6pJq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkCCRA9TVsSAnZWagAAiRAP/jAE4v6nkg4dtUfj+hX6\ngnZh/DIzbQbVYBtvsB9AQRQrJFsFeie3vTjVU260/ZZMoViDxJ8kAkUkkAdV\n5mLBbAuO3LxERB/fXmqVI7mVAHoVsErx5hnGYXPbOpa+I7bHqV+QyblaQLdb\nYcG6Bd9+2yofDTO7vy1LtVWrCcRliRHIh6yhj8Wlgp2nf1Ej0Rj0qFMBCJw3\ngv4mge6qZpH0F2LMjkIV062r/Dz48vNin6sYk0JMaZtlTwLmr6V3rK/h+nh8\nfSUHD8XvcqKFOvH5Ym+dvVcVRybEqJBiYvKMeHdbHz0VIrm1+yzy8XqlvalH\n++u2aUs+Q7gGW9y2iah+qyzzWbMkWlq9bKhwPPdaJLaggdPx/bkX1jlfVn65\nbx7LsiO19z1xvsxTMiB/IWeO4ZUZkDL8IWMaHkmfbv4hYChfoAXAcHubPyUX\nTFYXdAGDfeGeu7fKnNJ1lSWrHjo8AA7uX3O6vASsd1i+hMPdj3yL7kH9AbYM\ndREh1AP+EM+sedi/NjZyRbWWGXq2/7G2H2I6bl0Bz2uCZLgffTGNygaOcgD4\nNiKcc0egrskwBSg23E5j3V6vdI1hhZpBQJzRFn3jyUhEmSG+Tz6E3+t1dWq6\nQ/XvipKznhHbNWnm62s1bMn2q6xlZ3l/ACXVyg5JUzMxuSVFXLUTBAVLX15d\nHFoG\r\n=OicH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/typography":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.cafe18860.0_1584716033573_0.9815851316158082","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/slider","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"139869de84add2928dbd877ce406f4eeac4b0560","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.35a32aaea.0.tgz","fileCount":36,"integrity":"sha512-vGZ7pZdngFuFFdJVvKR4z/4YBmnJ3qbeGbiSwatT91CYQgJB3eAoCBTeAWvK5hCPUWgmiCW+wOvyZr7yBC7G1Q==","signatures":[{"sig":"MEUCIEM0B3iOng3s1dXYs91j+vQmFds4XHSG9wRwP3hv8upDAiEA7mE8k8/nH5k54PX2IlUUEbm65ESuGLdoGU34J9VzVIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCoCRA9TVsSAnZWagAAxBcP+wec5AL2qWx+0wHsdx1F\nQ3Kce6gf1fkNO7W4JlDfxYQWvxSzScnj4acG3Bak1T6l6eq39ahScqOErCrc\nZmrCW1x8yQJyWl9KSEN9fLRLiyTN+V0Wj9OloGDKVxggGE63N7sJ5q3BpNVB\nmNRpDERujYRQBaXlZtvxjy2IhyWJi9mqjPrGdu5CLO92eoSdf5haCrC0pFrr\nW6xRkLH0c2UeXX1GisoVuKRtbIUdyFlFPI9ww7990APHNkE6XyvRBiP+PXud\n5W982T+uL+8RTOiICDoNOSKt7y0JuQMEGLQIe2nSK5Hg4IHzNK3EJ5Di9akR\nWW5hQPkj6h6CW/owx2zH5JJnF9kD365ATQUxx6gCZfHqzKHgVjQ3ZIArTls+\nxCCOIP0QFOe64SLEagybscgeee9u/BdqCbtha0cR2Vhi9EArcEjRuNhiLHko\n0zmrim6P7gc4v4r5G3qHYuQUV8qnswPaHdI/rhlLywXYKXZQdlHvkgC4jZKM\nqQ81trTRASvyW9qJMym44x/gr2IIwW1v6C1CvmeIFEWhqWlKH2LXNJ/Wevbi\nVpLgts00MnksjBzPWhoL7PZcR+HFI8IPsQ5+8pVwap9J98pKdvhJYGugU/Fp\n1PPDPiXHOhe5doWqlwyH+BvC23BIKDG5yf1NSchL4qt1ls+Rn9xIWG9Tv2nA\nGElp\r\n=H7as\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/typography":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.35a32aaea.0_1584734376228_0.03047645772907015","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/slider","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c5c383c899421b47ee1e4b51054772c79c2619","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.e75deb854.0.tgz","fileCount":36,"integrity":"sha512-cK/8nbEQ738WcPSleOmYh+YevhfYtmeYrnDHLGVQ4WgKXg+tKOqhNLfGGCXyK2A7aLlFarnIIJ04JNQ+UbOHqQ==","signatures":[{"sig":"MEUCIQCOpi8DNuaLf2VKeFp06K+WAXDISmNV0HXRHgKlTS/udwIgK3MkVSnLmyPiCfp/OSwJrQvFyi3uPQOWrvzEUJY6dq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCMCRA9TVsSAnZWagAANEwP/31ARoH3s6pEtDtNN/Vl\ndF9P+dGuh+3Ai19HcgjffXAUS7wlh6FkjrdNTALzechdFtSFlyFdofarjY2M\nZflB09q83+YIlxmcixXa0fXrnoX9ptkkqC/PiB11DKTHRXFTbmooj+eS0ay8\n/B+JBVEKV3kFHC1kAO8kq4DSzuABsBaBGGV1pi5ANQvTNtcNfJzfvSKfxnzv\nNwwbC9BGugFX1d/ber2xFNqZuQ5ZihBfSunWFSCeBCNvEjVcLyxW3CrHI+Dl\n9z/kOZQTwQmgcme2aHqejlUMlI5ZI4fC4aTF5OT3PC5WPXSI1Ap1Hc8MSmCo\nynK7SQZQWcI9QPRqbKNtNfL8ngawRXcqpT7++h2uq8jkNzePHvBa2gtOngsp\n3Wil5vu6mglBz31cb7nam7JlYQc603Pxl/180JvCSx+1crHtCMDuh1D7pST2\ne6TTsfa57zUEz4pflHIWkpoDS0338rIS7pYMPMnYDfXnmGkvogcAtcr7xdnG\nXf1FR25lTWcOlcrdMgd3bmVmIdc8BHoWPVbfYdNiRs7eg4BjJWjHD1+5bmzm\npLqiVeOG3XAqjwaNM/2XpEzBLCJ5SYuJ0RCKeQZWGpzDY0nGw9bpmu/TcvZN\nvcR6+lnPkIp0Ueuei9NL89UGAf71eEgckuE99WryPr5zveCMsL1ZjtnCbHvp\np9F8\r\n=QIt/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/typography":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.e75deb854.0_1584742539650_0.46100952542121076","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/slider","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06b55abfc4e49ce725f8bb72bb29b9fc1baac4de","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.2cc6966f6.0.tgz","fileCount":36,"integrity":"sha512-NE0HV4QHCWckejaDRbUrqXPr9/aSCit8GxGLKl12fcv5LpLUKQrZULYA63I45lvP+cnMIxB6NJSAHatRM4S1NA==","signatures":[{"sig":"MEYCIQDLR2iRtau/kIG/qNUYNrXfGUXnN9SYuXBulCY6n5xIdAIhAMc5dAl/Ewow9WmvOfhySEEM/tMhu8gdkkMez8HgB5yY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTzCRA9TVsSAnZWagAAASEQAJUqk2o8oCkoCDW2n1OR\nMt9qZ6vFU+0879Um99w1bNXSboALCVL/jVWy/pGdQWwIDN4ylCea0qTu81T8\n2UB38Gj6OnOYgPAVjbb1id3VuTqqiNjhsbY7gPq/xsZGqm+Yim6zQmviwSM5\nOzDKx39SEMbUy+QYIawBFPDbIx+udn2kpllwGEAfoJvriG9kx2O0S6PIVdNr\nP46wVwuMWTLxvWdoQl9zkOObXAsLwIy3Eig5xffBO7Dmz4KeortV8ua/HD/G\nUFlqZCeDPgqqlNpDXGzd145NKxMrQDSNfYPT5LBtxSuSIvyqcOgqs9DZ6+Nl\nt5Qz3j4NLiSo0YSdhf7mWxlsqniKVvBBHp7t8vAQ3WU8RxXK+63EZvfF61Sr\nDEMmGNnvRS1fNQUBkhnyCkMJujetFAQySBJDETVAtllYIGc2haYWOfuTMcve\nLxDOM7QIRtTOgLg8jtsiSgAO5RTQt5Zr0vWitxOzGojiOgNWhpeAzghTPijc\ng/tR8nkH70CCTLjgY9KgnENlPJmYdHRkX7Jh7vSTsYut5hyTkVd0uzr06h0W\nTvSx5p7d6Vpf803LNN9rPK8hALXjYRVkBmkNX3OvA1J1pIRuJ8eAGIn2N8sO\nFmpjf7iz5VqXpS+R3toSXRSgbjOx63e70A0inUbuf86pHQqBuwjuXdDazKAy\n/q4v\r\n=XYXS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/typography":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.2cc6966f6.0_1585075442734_0.44726694222619257","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/slider","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a23d6f0268ac4b05d962c0881cc7a8ebfec09e1","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.8707953b6.0.tgz","fileCount":36,"integrity":"sha512-GSRzsRuWEgwzSFxLUh3abuomqOIZvP7+fltuuujyo7zl/U6uKYAfoKwzjr2qrbC9M3odtF/1zdvNH0lchvZxyA==","signatures":[{"sig":"MEUCIQD2scZ1IJvfjY4fIIFnDwNn0fZh5l703AO0pPjxAodXSAIgOVHmWMOrv+zX3/94vYrR+d8I4pI9LBzUO5nHtYcLji0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXGCRA9TVsSAnZWagAAShYP/2+3QvY3G2AzRzdYHvdI\nrNQTlsLPP8Gcom8l/EztNsfxIPr7QrifYEpqKlhDd1IPkiKoZrlYgMnYJGex\ndgGHz1Sfvz1YJPe53DA2BrGYX5odGBWU/PL/7iPqmDOHy4YywJ9SwjWISj4p\nKOhQmayEmvnTL+zVZqYe+VMQxBVNp+is/kEXvTzXRbwAAAPJRO5AD1I+UmYT\n2TQgT3tIN26+S/KEHKKfNc87lPnTbxIosm1crNysBuqYQhppB9Oi6aZCydnC\nmQRx6epdDmRQPmXIO7UkU3q6/M/T3rQfnLZi2K+EAljRsRVv2Sc04i7Vp+2y\n06YHcirjLrtxi6VuovZ9tNvqaNb8uP+/K8h0qkCra/nrRiiN7wrAV06+ggJv\nAMvu7uJT3UyyfGIk0lzBsfmcehTLXS8Bv/hGKGkH/Asdk212jCizxOvlhUNG\nOLqmDEqWsBD8+De9odKaJQRqx1NxYLdVFtpRKl3gGkNics8SLCr5O9ZpnrvS\nysF3ZJmXsH8UY9BlO07OqQ9nRG2Gn0qbmmX+5j/N122tAc7XK/hLZud8YY7g\nvuHYt3+Q+sAi7W1GJIdcUS9qq0S+BZvPLKu43qyruJQLVqyuo4X7h4IV4gQL\nRPEPEk9fYFFHsBkTNCwph3ISxexT7ZR+yxHfccpsZnCH9ymsh/IM9lPlsENF\n8yl4\r\n=XrbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/typography":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.8707953b6.0_1585075654210_0.783877359606183","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/slider","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"165445627fc19c4260784113d72aecb492ebdcd9","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.10af6cf39.0.tgz","fileCount":36,"integrity":"sha512-y+JhCU1T/fbXAIw6G50YNmBDHPF8/cpB2mY2Bk5ZdGqklgvgIFCDkdOx9u7wWyZ8aGajka+w0aWle7pQE4s7Dg==","signatures":[{"sig":"MEQCIBKVIM+YhyS5GbGAmm1d0kuMD23G6noidXMpeijZ0pDjAiARMdcKM+o5p9iBpM11TX6uwL99/FfPWXGg8uFK+oEF7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CICRA9TVsSAnZWagAArdIP/jAXQfHLFXu6EXOQzlwf\n2m+SLGtUBMTEwzkOTDkmbUX1/54d/Uym3VjByZMbpNECbjTfbT4mQtteidSa\njRZezFQyynAaKL8oPhGdJM22DZ7Hg3SNVD1q/MAEhpSLdnh3eGJrUY4FKyfS\n7ZIyqNhqjHAiBuNk2tLy8SMSHiKzcJT7a5btIv4t6QZ+JE/52O0UxZG4nySg\nzhwpeuK6B/GuJDzq+urA7MfGj2qiDJ8OPhuqCx2qcp606tBbbRJPubGxxoRJ\n6sCbG07Quc37uELEpmk401jxmy+xo6uj8BUptR6mB/7kbnGeddHJnuO1V6/+\nAeMfI59kjayUdP4SJwN7n0My8jM3oyrZkUdvG8K+l8J4O8Zrcyii34dDMu7G\nZk3FuB5KkuYyaBB/9Ty25ti/2ObFuc31nU3mDxacf84SiZNr1tCF2xlACt6y\nbHZwsNbDcoKv5SfsB0SdMY2NLi5bT1lOGSFMLt4P93Kd5xKSbBxFqjoJcNIn\naj45ouG5QX4em0Mhl2HS54RemOR7VpgehSa28VMt7Qx9S+PluMDYmNMkJaVB\nIBctcKWnliiKJmoIGga2MbL6zJprfWwFLC6wInegSqkD40pARK3TNJVpm69r\npX+0xqZmIpeHBANPzVlfZOxkZ3eVNwf/EWCVgO+C7En4CmZK4ZCcO3/UEz0H\nXdmk\r\n=bdGw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/typography":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.10af6cf39.0_1585160328047_0.025368079084871376","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/slider","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8e37ae98551212c024b0ee85a9e1a924cb76874","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":36,"integrity":"sha512-/Rnf2tdsyC5vn7pEJCEouria7ityaUUKvteyW8pCR/IBxbWrH6cqweN1ERXvsn/XYiyS7BW/5rDoV+Vr0gFLww==","signatures":[{"sig":"MEQCIBC/1dOtSjWhPQDj9dmTDuylbb0ZaFvGHr8hH2cPL+z9AiA/lx54/yMx7+DfFFhOV/SvGrFX3oiobVRrfoziVNjFhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBiCRA9TVsSAnZWagAAKWcP/iT2lMfdjcvS0U7TIv3E\nRqgV6uRWjvNFHSEnWgQjgSlSUaYA2CzNq2kenPdnKH22ZYwr4n58l9xaYDKw\nbdzXQK8K2fV5YLqLLxIQ1Xb0sKMY6lsBQ0C5okopNI6AffwoamLFIr47i0iN\nv2fKOGZVRdVpyemKbZkj54Cfx68XKuiYjYw9o06Z/53AvfLkMT3xlzCNyCHA\niR3jnkjs1+asFFjojseFbimbGDRUaaDM+96UTT8TB5R0/JGzpPlxWcyfTDpB\nxV7deMtH/zoL11bgncsg2U9d3zJmsAzJTgzN9Hftw/af2/UmJaHuSRiO8SIo\nSlaoSpz1Os3dSB8sHV6lIz8ewuWhb63pSRwkLsO3b3ZxRpQdI8QfnTi3aYQ1\nTQDw8oCBG/HOG/mH0CbcctbgUK0TSV/04CsEV8Vz3y1uagpimzmf4FJvPX+o\nDI4enr7xsoNynaBuhqN5nSQP+2s2eNe5De67rJW3qDo8pz1ZS9na5WWH7JtX\njZIqYBElWj0RYVqcAhImJZyxn50WXfpliSLcjTAL2CHtaUXqbKIn4Ae20mh0\nk3DAbH0VO2i3LTKWxmPR7lUqAmhMIsVSbP6P+DdkKw3vqNQAleknt65A3yJD\nMpkCvudTg7gK8gpjoJzxCsGKvFu5pGghQJhLaly8qdI2jzTRqasjgwIYHjkf\nl+bW\r\n=CAjg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/typography":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.7d8f9c8d7.0_1585332321749_0.5134834810988398","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/slider","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ee51ffa606897428dc9a72008b6a500f056e1b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.d6315efe2.0.tgz","fileCount":36,"integrity":"sha512-FlT4QugFrdgMOlYJMmy4QYI/yRQtAOXMK/UhvvsGLCYMHWPSobAEw7/h/HgLjlSmb2JCnsAVEkpbIP/X5CPTjw==","signatures":[{"sig":"MEUCIA+DvvlqRs6gb0yFHjWCEhirABG06Ar5pws9hUHhysldAiEAgrAqDLfIX39ouWFNxNjtfy8eBC62CFJw+QXgytuuduw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqDCRA9TVsSAnZWagAABEYP/jfbwHK4luAvt5MkCgYU\nGRUFDSC+p2oVxYQ1eeFQ1RVXT0mzYMIzJj7Ts/I24I+rRwiSN5NTKFhKm7jF\npLX42tVJPNJMKxW2IHjOzcoaR6IZ8yA3CJ/XgFalh0eXpSLWRq87ni7CI47P\nwUzgnQ01MjFCblhVcANEnW33gbEcTDI3aKil2Iy62btlV/nnMdOA3UrkfBw0\nSVuFe5EGpHCZagddBLRGMzpt4h0Ye+ODYFRp3v8smtALwMzBdEGEp4L4mpOJ\n3Hi1FlGYjIZr1MUQT0SF4uXArisKSzY/2t5OwwHeBMbiqqVIWUgcElGUku7b\nQ1OK0VTsoXnSD/f6/9Uispg1KhHHIOPuvEcg/ndoBsZ5rNh6hy0WzEO1Zl1y\n3VIVUSMP8V3YZvyxhG6F/1l4/VFu71iB9ikJBGDS/PzPwhVLvmwlJUgQFlV6\nh1NAF/XoSsTEFn+iqqL6CcAGTrRGP0I7QnBvFaAtOEHXhanouNJ+Bp3GXD91\nYO80bs6rHNSeRw0dE0eSnc/JcT8HFZcvvEFVM3FRKbQ/O+kvZ5RW0aiOdX17\nFtRKLY5duEnGq5n9ybvrLYuQVpeR2DKzUXX1r0AhIgoCy5N1skuCIFYHzJL0\nez7R/MMOKPM7uX0gM8SjgEMWjYgcMYGLZ8jt2iqntSpM6c35jWGYyiSHZiBJ\nOKDO\r\n=1sVm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/typography":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.d6315efe2.0_1585339011303_0.6390180832007293","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/slider","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d76baa5b413f2dd69425bd7daf1f71b0d3d0244","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.a3016368d.0.tgz","fileCount":36,"integrity":"sha512-miJ7U3htsiPJ/F7p9P/5tB2bT53ycs4tnxiSsOsXmoQDrv6qIL1vXd61q6eB2BOwlmUakEJsN92F/1hQPF/V2Q==","signatures":[{"sig":"MEQCIH9OmhCtOL3k2+ePaBRvxJrZ2Ay/WOT9RCx2DreVi4W6AiBxTqlzbD+fzZna8/lMJScMnZJjDFo4EMzCqJicN1p4Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm39CRA9TVsSAnZWagAAG/sP/2/wsyJfHkY+NROl2Ia9\n2MlkM1fPqETspoOV4CMIajbCWt2bfJLR3LrrZ7lVE80YYVUp1ezQTOeNu9JD\nBjwVeTOMSaDxSe4wVxwAZNtfbuN/UB8Vtcpq6nvOtxHzL4++cOPzOJ8dCMQ+\n/Y0jYvdvVjtXiLtrAZRvLDGMadjuw+Yf1zeZu1489Tw5WyobWbrLMe2jA+Vv\n+17eivp2ipPtsg2L/N0F+C8fi5RiRUVYYB3jfTISVtqxqEqINnVy023lnFlo\nkwu8LHMVLyZ9Hr4tVxSarLxyV9B+njzVFfPYfNK73cIX/w0zh8yNFkq9HuTG\nITNWLJJSpcAnmxyOnB9Gc4+6ztllxEG1r8E6Np7ylRlhKpPmgDAMSrnWlmGr\nhS2ZhkQ3PDLp+rsgEbzA7zsNafbjAfddv2gMO9ToqVC53G3UC/0Xq9c5tnW4\ntj7T8t+qMmxjQSgqhyoe/zJ0kJmO4iarLTIoJZFTcx1I3FXAAgYAbFn19MuG\nEECUTBsho2NsXnTplfkfdCesbClJbTm3S4KTA1qb0MnqC6pbr8jBlOEDsWG5\ne7QZ3+m8tzDosUjzyP5rL0Tp8F3eIVNYJ7/vL2Ea07v3bqKgpmt9AefpluM3\n7NLPhDHcBo4xJyOGz3uzr5HkR1J24GfBndDzgrEaAIqImnabvhDQ+4RC1npJ\nmNMI\r\n=BZx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/typography":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.a3016368d.0_1585343997527_0.25251468009861733","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/slider","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7816a455ff577754b0bd7a12514397d388f428fe","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.4b45b6620.0.tgz","fileCount":36,"integrity":"sha512-dq/ahz85PqOqqoNWPPspUkVhGmx7fhnddohOFnt2p7dGfNgTmUisoqZP6oJf43srLzoUNprKP+ahR+n9E4APjg==","signatures":[{"sig":"MEYCIQDLsA6oak6GTu6xqWMj/mOi2AxAw0VqnidnQebIz9J67QIhAMisEYrZRSuydP7uubAFMnJc1b4A4k5zEv6UFaLsdSrQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2g/CRA9TVsSAnZWagAAtkwP/jnADHNlMv9iNpwDm6VX\ncnXUAxyK+iylxM2Qga0VSg7ed7M4ahygnNDbmevkNBjV/L0+Zw2bJj69NY12\n0WOh5M2wLcaSoHQL6IeJEsUSOUyFuQWQMLS+sfEfiot1noejwf8911WteJdK\nwtK0vHwDjsBRIYNhF00/LoSnsB2eK+e9B8fNB/WAvffVQipwnjeq92UKSgp/\nf4Zhv8Bl5UO7YvQGl65gCYn98ge7FgHpehrgAqTv+2IZkP5tOMQSfeBDcza6\niCEKGb31XkEjwGW0P50YIJ+ZS97wLlI3d581rv2UIhqr2JxdbhRec8vTVp9c\nwrMrjK3HgjwBqnmAXeyq7wU82aKq/OMX8zs1kLVjI82OD1l+5JMnXb6lHSRg\nr+64eFn+LGkTeQGl+hIkhEi0Hq9K1BQpwKd1FMdkWbKP74S33sdw3F0WwI/g\nvMTeViBmu8u51qtmNIW3TzsvEx5Lg5RXUS7SdWoqNoogAES/Q+oSJAACH4Xh\n5f6nWsmTh4DXoHuY2OsyLA1Lw3vohUKOdSS0Yx8KX+TnVTnbDB/sYqRVNPAF\n8iJ9LtPkVu++Tp3P/cQq4AfTiV34h3n5P5F24R9J29uRb78+CQhNAor/odbK\nYHnlBAVTJJvtvjVxjN8pZTTHyHXVvCytAZARoyjGYWWSRJbeAtbLL+bEh6FC\nD6P8\r\n=96/g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/typography":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.4b45b6620.0_1585670206865_0.8672698322808832","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/slider","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e61673f7008625b837552ce3d277f4d3b80f3f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.e84b9c8.0.tgz","fileCount":36,"integrity":"sha512-QyND/KKZyn8LKa0Qq1iRoR0VDGrNpkG2esLpfmcWLZYevcetZs/9DA+Pfqy7yTJ2FinLjscQ9DcGz2hji6mz7Q==","signatures":[{"sig":"MEQCICZ5k1bt66fAeqzsx6MXezOt2YgZS4APJzyIGwC1SCPRAiB3FMlpprLk9gLcuqyePN3CDHYn6+V+wxu7L2ee/VCyaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMe7CRA9TVsSAnZWagAAaK0P/jIRPcelkP3i7euyobTh\nR2Qrsdgooif0AClUN3FfL2JAv1akhgd7Zi9uJpguQ9t9sxxIrmq76+PRt0Xa\n9il2/QaOaPY/zV/0FoblIqOOw/JZw8InvKhGKvcGXiCYhiqgAeI8fAgEczbd\nNfZvbuXLVDWkPJzZuXvMHiJL/54hpaVNqyR0A+ZPRhfav0big3s9YQCpP9Q9\n4GtYCswtQKg/u6pXa0utZ/tSd1BqvlnVifx5N+wwWsV5zE1ZRUCqY8zYr3GS\n21cnumLiJiBMmbo6w23GrJwH9gxv1aNTgKx3cjmuyP/NxH2OmytjCdKUPL0M\nkp0ZUo8mHXZPlFs2K9lY4/9Pi9Aig+axKeNp+b9VcyTpAE8p6h6iX5LxtGGU\nK6Rd1h/zu5Roz0WycBNlNc6x2ykunP7DE4vUHyKPW1gprkeKkWjrWyli7DHP\nbvSZBzx1RbACgGOYQfS16cA8OTAT1OEc6ZWLgUD7H42a4g19vnurz9hbgJCK\nGEELHAHLwZM3c2woOcRkiPxukuIurGT2VxYsLAo2W5HrtAi2nWPN0DCcFW1b\nEZFYW6/7HPR4QNIBf0kDAg1hUDft5CJwPO1/Hr+UKYqYfrDGuuE/aLIm//9q\nBzMsM9hK4hqxeF9qYh1htPCffbQsZzxcZ4V/zvkYTcQjaItVoCEQeb+vSJDu\nLrWb\r\n=cLaq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/typography":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.e84b9c8.0_1585760186706_0.8823299475916784","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/slider","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71c2ae222807ad478552b0645d2245037e5f64fc","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.e33c49e.0.tgz","fileCount":36,"integrity":"sha512-jMSFCPQIk5qYEUcBhzm9Ev+PjuAFLi48KwYMC8RjJho5wggSgMxsnWazyyyhLymmBxPy9r3laLVO4XLNV17yIQ==","signatures":[{"sig":"MEQCIEVsk03JS0g2xPzRG45eapmnMdJZ3KnsTQdMxxqr4PRGAiAGXuZ2AORR07yyCZmPocxOLBfFwBH1s1kxu/ozLvzlPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1XCRA9TVsSAnZWagAAdU0P/0/5X61TSYveS+PkeIM2\ntcg54xq1mb/ebmrDYQFnLPFYj/Z3UVwyP1yiRLFz/iL6fBIaaIJBMpQpi05t\nCVoET0sbHVkkcR+/XufMLkQAVT+x22o/D7fGgIH3jd5jZLMk0eFsoK8qNyVD\nNeYDChSCOvKpB0whehfgheVcGck0/Q0ZFyl9y6SXGH4ZoPAg2FjrOM8GBICW\n0w44jIk/bivhuE7bE7iwWQLZZ/nJOn6p7KxxlooBvFkri5NuHC07B22fLDet\nUCpybT3hpkUXX08qqvluVApAMV/qK+1Cg7bzy1jiOAXCTm4AcgjKjH7sEQoJ\nVWuZqMd+Z/e2iT0eHQTdT1dulfgK5Ia2LfeYtLeTw0z+IE1DR4oRupvGKKIQ\nSk6MXjiMEZN5wh9vCC+RnYd/xaQATJWR1rJ1gt5Vt7ZENV07x8HSxqg886PY\nqX/GxzbnXcnNH4F4JWJGi3eq4xRGJUEmHM7TSez/F9iPl/d7WLYNAkhobRMI\nRs2CTkIgzDK8g/Hsm14rVAwAr66T/az57mtq6lTNgtPEyElHiIus506bJ31E\nI/knP086KqvYntaYnxQk+3QLx1eJQH8+t+nZLHp5U+Jhvk95P3Zqb69IFtmR\nE7MUtBfpGAq1kTNw2KNV5r4NZomjsM6AfLxiTNxzYA0q1GkDz1gyHaFWlcNc\nn3v7\r\n=rFFc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/typography":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.e33c49e.0_1585786198748_0.2273884373327033","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/slider","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c07418874b87ea0b5ba07f135b78b108029372d6","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.f1f8e60.0.tgz","fileCount":36,"integrity":"sha512-msXrS19iOv2v4mYg+6UG+p9L9TnXzkgF2W4rDi13JfxekUcRBZb05Kqng4IJFLc392w2YqYelF7Ya9WlBNCdXw==","signatures":[{"sig":"MEYCIQD2R7U7q6932j3E27vWei/Q4oTb9SDXC3TrBBxMFoIExQIhAIVEMuh574jS+hfEja96bOjByz4mtlnMoURieqx+cHNL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmUCRA9TVsSAnZWagAAVxcQAJZXtg/Bl6/WTMhFBSJY\nZP7//pYmnKKiU4U6f1nLbug5IoLhx6oRcgaENi0lkXKM8oBKrx3kcvBsfz97\nzSTfXngIW3BrGp0ao2gwwN9denipLKFuYgl7PqbMxPWzxYJtETbJ4LddfYwy\nEgH9s7m4hOPtuEnQhArdra5/JTknaGKYYBKR4brF0eNky6NEfgU6QpapVouv\nbhURZUfUej3ur/4w8gWGuKcbqbOEjy8R8hBMhmTjRJ/TLdpOhpRQRgOTffpg\nzkWi2d2myVkNsNqgyp5VQ3ec4YuHCLJzD2qgpqkNDTqaz7wyS3qPybJZJOJK\nS9anjIcG2KKL0OW6cNY9DyXzoMkjBFN/nN3L45JHo6XfjMWN+RsbhadLrBD9\n6n2uL//Ij79GRFCXEfWXC28EbCiZi+prekXz9eHirRNufhl4yXKoL01o0cgc\nStF2w9/2dUC2m/ROWmQKmLyEm54r8FBHwSgmvDu27ZPGMc4n/pG55yXjlHal\nW7rZOqvkgzfxbdctYVNqYwOek7PvOVaIbqbN2TcDPhsglSwTPjmt3k13pnw8\nVA2EKnew+jBRP9z3ZPQFU0akUG59hsjDz6xE8M0zVSYfJdV/rsLfNdm2bpP9\nq3KaVsanMAGn6BIWc7+Eob5O+YUg9yKSIgjQ7mM6wCMyhfBKAF1AigOLXHVz\n0+b+\r\n=zOim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/typography":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.f1f8e60.0_1585854867775_0.4895357102272673","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/slider","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ecb12ec9c3838eb7bf007efcb4b945a5526709","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.1e17c49b3.0.tgz","fileCount":36,"integrity":"sha512-lKtBLHA9bSwg2cITp3uS8GQuVEQovRG5w79qPeu4f3XTxYy0bBF4QDtCZjn0RRdnn9hcXZhMwrJvft7OrWC+og==","signatures":[{"sig":"MEQCIHrdeYdImuHNGXw+5dKZ+Wmir1ftJJuISg2pw8czJb9/AiBg7DgR4l+vLcOR12OZJLpoSfFwIDGfQa9yzDt8WO56pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qvCRA9TVsSAnZWagAAbJ4P/1AUK3SXuFDH57TeFRiB\nIwp6fTXXAQK8J5MP41VzI3p6c0KA++lLw7kCaK5ktf5zFmmqvuqUL3soTBg+\nwBIkv3N10IfJGjPneDYxjqjIopPENb1v4UborFnJzluWpSYeEuyMTAxQ87fS\n3hQPs7rGl1ZvEHjT6EJ9o2aj+tJz1KXql5VAau7gvc0L2KA6W0UCO1WjCRtX\n/tCl5LA2w7CKl+WLLc8diHSVOIaWTFM1rcUmgz6j7z2pGQ0ZMRG1rOlqsoIL\nhk2TJ8V9Mbsx6gHp9BY+9j/YSyhOJtK18STqfu9TcTj9eBP2MXtmcnQYNA6+\nvOAje7Jlpx8OwyEZdt4iC5Hag0/vkM8nyF6KC86Yr++ZiR+TX0PgxKD6+6Ix\nDR2u8wfDVW3gQ1Jc8V0t0vpr3G/52d03MIS9dFpOlcGJxxrNQgwb9vz0jvIN\ncbk5yJQ1NO17rs2KgiI+jXJFNLQ2BSnKpr+P6cLpNrKwUIZMHaV2EZtVcLyq\n2ME/Mdc0D6K7bfuRyKZas4ckOZ9dYkgIgCdWgLrE3QIcXyMz014yf8k5uaWC\nnAba3iopcl3jqAJlGZQRGvCIH5YnzVjx83Y9sjcev9gw7VEDFX65gakRwpvn\n0MMFo3+2DUZ6JIlilwSRhDy/LQTkEIgcvtIH2wc8LBqvQRRSeOUn7vgR07vU\nId2s\r\n=62g6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/typography":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.1e17c49b3.0_1585937071203_0.2441264926415856","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/slider","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76a5b137757d3431e3ad6c0438131ae884d9728b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.6a40ef217.0.tgz","fileCount":36,"integrity":"sha512-A5BvhgBtj5qk3EQpAsf8lLS5z4f7H657WIFeqF5WFr9Gzu0vxBC/wKVBvU0H/e9FR3d4WwdPsDcZnidRJwAyvg==","signatures":[{"sig":"MEUCIQCiERL2DldVejr3hECz7fvJT8xy2A5CxSs/llVluj642wIgVfcZ39j9aV88KL1UD58bne90Jiy0oABWnb2GuiHlrj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42UCRA9TVsSAnZWagAAjScP/0C2ebJvv2VWVfnAnhWr\nju9FCI+HCbbL48bzDwlIDiHqDCWd4EeIXKO33DJIpmdcfYSRPKzA1ubw8VYS\nQFcJ2dvqWHiBI3+hAZy/d+akZ2QFEH4EuuCStiOdeOX1XtxFFYemJYKKTd/I\nf53ylV3OIkN+bUQQrYzvvWVWeCItsrKfZEI2ThjkczRL3GqaMMw56vcuc3li\nylhmuE1eStdfJeb+BRPkYphPjGmBK4GKzIhlIDcETEPqWI1bP9lsoklDY5KC\nY/soFPRBp5nalBmaLdQc8Zt2P0tx3lmir8ET9P11XaCHvKdm+zK8eWDDv0fx\nQv4gmZrlebapRxth+mSYqlThU5o/Q/3Xif2AueITojtJxLHiL72fstJib1/k\nNOi92KKrxzi6aK9Em9MdGu3g3SKmKOUC3v+4pd1v0FlxpZOFGsGBFrI2dfaS\nth1Gglv49VoNYA4mGu0EXSzrEeZfD+JOhMrfOpbLQ9yfU1GpiHFz+UwfuHDO\nF0n6B7kQthq8ouUO+g/lRE+HEY+WQ0rZWtVOyq7wsJs5jpbGYldxsM0txpoA\ncsC/SrGq9ixDa5cDpbqtYVTvUo1XVT7xhazjIVgG278Z+GN6wrYlAg4NZRxF\ntxkLItM7GJSwJ+seKh+MeXIrRRsPR2O1nqtpZ7k4b+GnSifDWBs1KS14awOL\nlKfb\r\n=/inr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/typography":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.6a40ef217.0_1585941907825_0.554183556115182","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/slider","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ad6c777c033d93e2b99f0789ad0fbdeca90247","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.5f24faacb.0.tgz","fileCount":36,"integrity":"sha512-uYDi8wxQiJoktlYTAKU9sjEtrVuE6Mb9E9IoghhWvp2f/98fpIr2NC2mq2p/yP3ehZ7dJS2zCD0/JniolaueuQ==","signatures":[{"sig":"MEQCIAiI/mSEIpyUil+kRS6A4NQcxkGNRVIWMjFEiH3Wp+L1AiAnd0jkZoBONYzak+qJDYMk8GosKLrMQGQcRtVBl7VoYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+kCRA9TVsSAnZWagAAJY8P/26eHtjeDa1gRXBmueAc\n6nSNNHPkAI5h9grraidVOoivnYbsSKlbazXq8R/xWUzKg2USIJ4HTiaUVToy\nsUZuAtFwTwvETPnTgYVYpzv71D9aD3s9gOh2RWgzO2lNyiTZqHFn/tqLS4j0\nFy0ku0uRNB8va28mIWN58HvXVvQo82ADyaQF1fJ4T+d4NSTxH7sVM9m7E/MX\nztN9g75TtkT1RvWzsKc8nDsL7t2VgsSMCwMhmZUFzqDd7wJb8oqjwVye9f2G\noJtlg10wC92cVlrBytx1wt98LZvlrdlnDrf8c0R9l1ZjyjJ6E0/mSUapZCkv\nrQsFzqDoHbOFCfKoFbJkaj4irQj4VSbHKN3BPQHyON8+ivpVBSt/e1FKehLN\nLiGjH0/97KASa0SdZWWCEUc05w1QNP/+HK1IvBceEBV76HLjQTYuj/FX69bo\nLhvLQPViWQQfqDbGlktEbncQVEdcxHujtbAXXIIpzXILQ7Lk4NXh3hw5sneI\nfkvjaIQBepG9WnnSGiOvfICnN8+WM5IT/fg4nJQCvHU+TKGfwxHWqMNCrEpy\nG0jOglyOQD8uHPThoYyyk/44U64Yov/h0s4HW4dzi5/lc/1SOLBUam9N4L7Q\n5ubRqblxqrwsPuo5CHlBBNS96j5xFoe4cr2THWrMc37WutKP733Bu/2jAjEF\nVcpZ\r\n=XCoR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/typography":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.5f24faacb.0_1586360227910_0.05628667340666027","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/slider","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585bac55e9856ab94410a3cfde5d4d046dd980b2","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.82fa986b9.0.tgz","fileCount":36,"integrity":"sha512-qYgF5oskEM2ozBnh7vwWB64cJMF076KDoITf8sUsOtT6OyHP+e60MKREs2QJAQrkizK4VZDuL13puIcBeb6ErQ==","signatures":[{"sig":"MEUCIQDP/b/Y+KimUQcKm4e6HB9835WQNUo8sU44W2gFj+ZjxQIgKoG5vxT4BaimMVT/CiOsysOSdSCQRdSPoWAXVxKS2O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDUCRA9TVsSAnZWagAAM5kP/jLBafXBK4RzjJGXq+3A\nmS4i7IMX1awlL7sX2ZGL8v2o0ArtlFV+XrDaVltGEmvg/BtES6hgtB+uO+QP\n7vG4tVorJEwcXXFQDok/lbEBsK5WHhr3Lt14BF5PuqiJwo5OWU2sP0WldMg6\npoPy0gzu0C8ImGjZDVTqkRL1bLnSPf+PTHOGFdqOFD9w8kfUfouKkPYMUqjN\nBCcMWEBSc2o0/67g08nBrMc4mcR682nD+KkantwcddXhuf5G5AU8TZgj8VwT\nuYm/WOuTBy5B9Pu98GdzQiM2nCNe4OkWqOyY6ZgnR4EEw/WzIVEawlm9+Tbd\n9nK04Li4dcGSlW4vqHsa5u/4SFPaHxYXC9LnCnQYg1tKTeQKFmwkokwCxsJi\naESBvmLvKTc5gOCQVfE0hcEMi/WUrrzdK5Rz58iGh1kiFTzHR58ygPra6r6w\nFOBA+0Mh+zSMrqkWfR5+eaEVvNzskcO5llZZUcJFHjmlHi30bLN2XIStDWFc\nYw5TYqFZKdsZ8g+pt7WdRKmHbBRKjRvQgjaRURgNFyD/idOIk/owQK8iEr1N\nrK0qe6+ik8YgJrbLjU6VfUMJQrpdLqCv9igHI0NAhPjGfYlWlkuzzswYiS0Y\ndrX4ZFw71xVh1t0BHP0mEhQI7ScoTC7uH3361H8VhXNLuLZ2t5DVK+txMZZk\nKBvq\r\n=g3o2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/typography":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.82fa986b9.0_1586360531633_0.6877754094303976","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/slider","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fae97baa3f12888b7ea64bab97cd6df274fc19f","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.9930d9cc5.0.tgz","fileCount":36,"integrity":"sha512-SmRA0MHorlOHeDgE64njxDYwIlajequdCANnyyLWg+LwVDkCtwMkN/VDAXP6TvzbN4clSezj5m8SuV1SCR4yXw==","signatures":[{"sig":"MEQCIDVsNL3f4P1xub8hsxN0uB2Xto+5bD/ZB/cj8zrnskVWAiBvuq7FVGq3MBqdf6Niz8GuvZYIzvPWeYKp7uPTQIMjSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibmCRA9TVsSAnZWagAAxVgP/0+bUTl3fFSPAs9I3/8P\nIPIFY/rDx9DBV4ddkrg4z5SaJfQEzaV8pE0aJiF55yFaM5huSsZcJcitv5wv\nc1spMPQ4RmibBN5b9oFJ3fnkzjUIeJdGG4FRqNCID01Z5aIV+uujl2VuU/QQ\nxQzVzbB6hTI6kJINLM5U1Qz31RyLIZQi4yJLcPKTfByv2G0Y0aGFZpFdu3jc\n0zHYizj1RrN/iwHNqp/ph+tAzpdyxO02Rxhg0YFIddr356LoXGfB/uBf2IMU\nTKX5bo2P0bhl5PeLk6C36Ej8NmvwGT+dRCfMH8hDskoeEO+G3IRlG42SihYL\nh+9IMPM0Yf/BElaglIjgAg3/agnlrmK1QUSO49jD4sUHR3kDgnxYu7JsMTBE\nhfxGvn/YkidPiD6ewT7kuUHQacjKvIeqKSjGD8dYCjDk0etqESFezF227pu1\nmm7vteJu1EIELs/dZX6/UAa62BPtHMnaVHUD9CjL/ZvuUzCF+qA9t8Sa6v/x\nhhi7FCa91xHCJiB2ztiD3XmBQOyQrkAwad2Sdv8J2oaj7W+TZ2RactPknlJH\nFQk3KT9BniFd/txutcN3GiTyitQap/fvYS6PNvhY8P5ieHoIbb3/5XRXy9yL\nnuRfUpzuABhAv+BRz4B7wTKEAZ3Kem5Q4w6mAmR1Y+uRKAzcNZ2l+1pgEMIT\nIv0k\r\n=LuOG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/typography":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.9930d9cc5.0_1586374374450_0.11948587798952648","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/slider","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e6977670bbc7935db2b78fe0e99128a49aba8e5","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.6601d24af.0.tgz","fileCount":36,"integrity":"sha512-7SKnin2nJa975lDxcx7+DAO0peiXaoFv8mPr2Ngwgh7VGDtnkNIzdKHzxhZ9pnu98KrMlEKuNvapT4Zl3ERtsw==","signatures":[{"sig":"MEUCIQDgZohMUBxvUEN8lnouFgm05nEmoPQ9klB81Kx4N3zAxQIgIncNVTtXGfn5nLZMWns5svombVOGdbb79reNcjuRLnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmydCRA9TVsSAnZWagAAhyAQAJX67Xjx4Z9dGQJqhVvT\n9fNUXEj10+dHLW5+RKeDvKk8aei/JvMLftWKhwmfVYjUniUMqBwFQCyOjAAZ\nPT2/lRIy2ScJR6hfHQfIC0MHEMagmdrFdCOvoNwdrzQ55rMAcraNEFLKoRyD\nS+/H8gzvHgJ5k2uzgrQb0yqp+Q2KpOy8zzRS66yTqfxN+kG/u6HsKJ+rxXXK\nJfpSK+20ZB1ftwVoTlBNzGNJdlET83KTP6YhlPzPBlZVJRj0K6Delr16GN8v\nfQ7HLmT51i04azohSpqysEjQdNhs/5dE3Wzg8JxWo/+wyXA60FXHk0zokdk9\nShZHbAAEpUqWVAGo6uyNInLZK/NSJ0bBcyyyyzcCrxdvQ+wDJsKc3Uo8kI5M\nwXYj6CWzbysF6OrpJZNWcFA/Sn9iWx6uARrJYjWFfbVp4yKkB36wJGfzsV0i\nNglGQyS0HCjuFO21emp5zQhAczb47nxC94EBgXPrgBKp71DO6k4SL2Y9WoBF\n+RNe6y01nk5Tl9gjDJyWAL3mL4CTk6PRSWo3PpWSXejN5JWObOt+RCB3cpXz\n+FCmgPBfhVacgO110OlcjqzFg6d9uEndthZKSgq7yDclxvQ/zOC5lKBJTWlx\n1LDpUicOePxst6kHn/U+siYoQbE8asFcTzh/G3oUlgbHV9RKzWNWd3nFJrVk\nAnL+\r\n=KPxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/typography":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.6601d24af.0_1586392221039_0.43473084971853115","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/slider","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0468e4091a884481d49307d54a6c0e880d29c720","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.05f5e1583.0.tgz","fileCount":36,"integrity":"sha512-IJ3qwjb7Cw5GKYebx5t3C3wOcb3wHlMmGMrcHCy8ad51fzMQrUyc17pJVdCdZqdbatC/jU2NXi6Tb4LyJTrKwA==","signatures":[{"sig":"MEUCIQDqnqz53Gc1I69EAtMu2QhBEZLe7O26VZetf3+sb9FPSwIgSovFEEvip3Fr0jR8FLL06uFt6Ae94f0AL1Jk5JXkp1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":370076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCyCRA9TVsSAnZWagAABewQAIiXxleGlCggrnNayzaq\nZMjqizAAswwkizK36Nz78mFX6wYw+qRARQOdpeaeRLksUp+w8ezw3BxYqNhO\nu0Xq8TIvKCff7LtNIHARoTCAp4rdgs2KRGOUxT+DdZIDKyVOosKVYF5AWYAJ\nAmRjSpyXGQI+GPsGKsr/96EkY5pteTZ0BMy7YwqARdJZJf0IVW1T0JR+gtxE\nCqegshOrajIPqqxDladK6Qsg2fMZBCdWGY8Vhc/yrJk0eQprUd1Fq8fZJl8/\nNnNafGm+zvjmh2PSVJjleU+8KdLe3kQkEJvdoH8R0IgbpJjgSepGs1ZvK+TH\n3OqWtjJ3MRIbkbzj1sZbqK8+dXZF+uvECCDQTpZ4MwaZsD1sSclz4gJamcwu\nsiK3tMlVvEcioaH6uw0cgxbm9YaLwRvEfve8E3fM7pWcpvvUaz2/DgUIbQnq\nd1x4lxVFutvCDt3yicNC7zwdLc+YNXuT4IT2RAWzf01bc9a3OGij3saPVcEn\n+x6Gak11e9JJwzZUnUEwI772p3k9FG/Ke9N8Xhc62bYpHu7gSVOHfgSkHn9w\n55zNwTa000lkBPk0iKgvBYTWlUWLUco+CHynt0ycj1ZYVYl6nJ7IhnteqrZG\nyvro+sdmTDv3XE9ApBwVYki6yCrN3AKRW0isVnIkdaQwe1HmtKGprm+tl6cm\nE1Cm\r\n=WFm2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/typography":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.05f5e1583.0_1586393265782_0.5829547698825928","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/slider","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e2d497c0a09b643611c991a8de7f8704424982e","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.bce00e186.0.tgz","fileCount":36,"integrity":"sha512-8Ay9mU2DR+vo+RS/BpJPpUB0XANITvQGCB/FtihAWj3IZT3GlU7OvzUxs7fVxKjDirxZeZslcIZfUwLyeBSJug==","signatures":[{"sig":"MEUCIQCmaxm9pFRbgFH6Ob9gE7/ri5ByRocFj6lmDKAhPAWXxwIgdrRJby7Ztnyi7t9tTUgp9+8t5LTY/2j6CgPl5sqG50U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz34CRA9TVsSAnZWagAALSQP/2XN33EkoFGx+i7oSZeW\nnc01cp06jgTmRyGftTpMXlfyznBUX/VgEzJO43Hk4MpHnBuPPUbFD8CYie5T\n1WY6grdItbjsVSUCT24i2LCXEFSIaaaqYssBghHBHCTMDxYy0vnnQhHqTjhX\n5e6Hyrp7u+35EbAiJRVTm7e8ANWld/NbA+TbwQC50u/0XUaUAA94WKitKifr\nO9nfdaiTG43EcbL15GP7BjsbGlpOVCL+dG2Vjmm3IFvC+jWBAm40ag3Z3SBp\njTp4cV4Qqy9VowTqkj3Ebpi3q6ggB5iXnxN1xeF1N6YS2EkM/VAEQfqD/Q4C\nKKy+HUZf/LtRZN/kALUVmJZtGAZ01vyxn15rgxO4KHf87KwIE5Q7Jwr55FaL\ndBL6jwtbj1TtwZwr/GHv+3mPIJK3WaLbQILGyRd2WaiZAyD0gfNJ1aWX7G2N\nPNFE4hjBtC/MBfvN02pFBgbVFCzblHyYYaAe4bfab81PstXlto2KMmy9/73H\nIv0ozaQtjVekJOwiYjKk1e8dOotZyVJdP8UAXEcLFyIAMDVFDgcee6VFwv2T\nJvHuDgx1bbAaCOeedsQ+MEeOQ7faGZxITamxOAgjv68fxq8tG9amuiye/SaU\nnHNOzxgTSGErSF8LEMnSZ+P2Az4I+wthgs9hcmdf55+JAn5+bF0ODvtHm0Gh\ncaa9\r\n=TDD4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/typography":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.bce00e186.0_1586445816259_0.16149872470969884","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/slider","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcac13b73d6946e385450344eb345d8047398a03","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.927fa902c.0.tgz","fileCount":36,"integrity":"sha512-RLfC2o6II6xfjzXC1iX9CukZRBBaslyKbbPhUJEFjxLHggolIiP+cqmqb/WkQjN4Itj1GSR0Y++69/FMjVoj7Q==","signatures":[{"sig":"MEUCICbv6fXahpBWVyisMWskUNFD1GH1ujSx5nRQcaZQEiqqAiEA2xmOxbTBTP42/RdrnIG9dcXp317kQh37eS3ux9uIXdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22hCRA9TVsSAnZWagAAPcUQAJ0lMnA8qH5T/EHuVw5R\nNU2GELI1szbnuEcpxDA8sGrM05ZEkpLciWq2bO6mF1jTShWABADv6v0tuv0o\nfVEY1e3Eyy2uKMGMNuAGLC6g3iZmcmoCgpVLUdcqDBjIqIOPjcuGZnQNGTrX\nsSxhCOr5eXvmSNoOun9wsy9azBCcbOc/AWFOwzSCdtXKDRMUW/U4G6g5zKd6\nqCDRisoB1qEKB1XDiKdZWq+6E4eF4r1eEmRtb8rhiV92qxk1+tkvKQUxJWl7\nUkOiCNvO67a/jzDeDf6CabUKbnnwaPewck7soYM3PIkFmqW+vmBMYwqN7J5i\ntUT/Tdi8v4x92rmu4h034zLxSoozo4dApIegQxfTaLKaQmwSG/FFs7V2w2oB\nuFz2bO94IR/sZoDoocuXuBEBRXf58FxCkzBz2bvIGIL9FgZEF/rWBILgySTG\nut4YA9gIiR1CaHbOOgdfdhKCT2B1WEkNlU1YTVZ+A5OMCKnddFukr8WGieN3\ng+fU7x385Upoq2nk5LUuPCuKjl2J73U7myi8+xGHWT2Oh6jdbCKF0g+0yKFB\ntavpDcDomAhsYS85QsYdErvVj9feCVDrWnYjmp/20HGE6XTfzTv7auKsEyAY\nSnb32Crr2WM5JZo4df3Gfx0tFQDM3mKrkzhXtDIRZc+havrJJSMUgSf5DndS\nvWa4\r\n=FBVZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/typography":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.927fa902c.0_1586458016659_0.11197517790402456","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/slider","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cca15d2719ae2f2c8acbf4d04cf7578b5fdfba3b","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":36,"integrity":"sha512-fsJWR58dSXcBmP/RWBTZRtgVkL9Ls68PztRhvbve5cjYAbZRVAPJlq3lK9ohAlkb0cylF83LRaBchYBpgiOQKg==","signatures":[{"sig":"MEYCIQDS7B2inqaPXgdj3sFYuOqI/mGIxynkdIWV/02kIvb68gIhAK1LxU+qpZGmKlvDi4PXoVGcaeL6M7ay7ThfOashKsUx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmVCRA9TVsSAnZWagAAXZ8QAKB0kJinQdKfznv3l8tC\nZr71GP5SuM5aHZCzcguvjL83ov16Z07d9eSixHXI2As/wgoXtPpWqQiDicLJ\nHUjICWZbXkFg/XlMdOyNdF1hdqwfKwO+lvm/YQNsvRuz/ec/27VSgzCMEstG\n/7yPcB0JsFLae6L3LJ0CSWU5CFGPkJbGEaJcVBgaWQMHMLgt5cFOFOb6MEPq\nseC0H7nXbRXCbakdxYB+2yeD/7iJNwfRAWwuuPZbgffFwGnOYyDXqJfr6gM6\nMLGSa8aJ+cjuYn1csZXjiAhIDGoSkik8YQzYsqfVQqaRqxYow+o7YcOh1jYM\nUCiFFx9TtnjGl1GYuh9118r/MfRGrfVsfvoIvGDqX9VSje9C1KSOPeftAEUH\nfJ9atjt2vi6AG5d6Vrx/SdZCZ3tcGSvJS8VafpuvHSINcatkoAkFTfectPBv\nMAUvxyWvyMlNV3u5e7L1r1Vx8eqqVF6msKmKHoYwYv8CoeHx0ujJw9S1gNXb\nP01yeKQwLv9K3mIpBOu6T0X/Z0BaFYEpoJ5hCEgHJo+qTuN9M1vG1fk2Y3qX\nAWDOyCutoi+sBapjdLr4o4/EIuaSc1y9v5w31mpzrOrCF43EqVQgKqN+yZLz\nBQq5hmDI/oKt8Vgur/9uvzx95LrVdnxBW9il4IK4rh42S5hiIp//Df3+u+bo\nihI2\r\n=GoB3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/typography":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.eb28b6ecc.0_1586547092896_0.614483147478067","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/slider","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d29215b23e75dd7bfe5fbcfc2a52e8bf254e26b4","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.816a43b42.0.tgz","fileCount":36,"integrity":"sha512-10GqNJT8BEwL2H+SvOsSUJFE3zx4VfktJcdiDuqAc2ulD2Hb3Veo01FXdOjG0rvj169mkBjL/ibMlaHyCMX5ww==","signatures":[{"sig":"MEYCIQCAtIXGP/ZAorHNqhojUwx5791JbPWQkfu2MeikUkzohwIhANONdpQVC0F9Fxi2tdYZK9gOgaoV1MvvOnx3YJEmVUvM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNy4CRA9TVsSAnZWagAA1YAP/2ks+CUka+uiRO/9pZrN\nYJsm4R0a1Dm2SdEdhuPlwwKH0pVKFX5pfe1+VAT38O123Sy/wx8iYqlvKaR0\nKlMfb5VaCooEf4NKevT+hrEU0EC0cA4YZKKzGpsoUHkIs55Q7R4O2dcXHNLp\nuQgArTdWj0F3nlNCDOX4iy/0VvGmu/i9ktnRkUf7oL+MGI6EbrP4ivQQ8sJW\nMRoWxzgjftwbFTiMwdDr8UW049DRzSdcsDmZ4/XfYoLLK+lv+CwwntohX1zO\n/7uDVbdJ5DHDXpxQbnmBDyBQUBoansDo4PLOPvV3r6v6zfQ6Txqrruc/rf3O\n6jXjpH6B9fcwWjgSIXRogPnPGNDmQCXARSQ+0xljNO8Q1AersKy8zNRgkAq8\nQ8VK6mbx7AuL9jDOtThfrKUnJMK51MLkMiUe9OxLun/oew/RnlTnDzcvu5kf\nZzefYhmEFR4k9XoK2FYBTOydDJz4/4PXMWxAk7xoyBiapiEq5s61+mhwcmdI\nW2qXkjKr/FiXYx24qBuXkkEaa/De/gKDjICcS6Pba9qA+NCsqe44gU/+MjcO\nQM8SJXbEfDjn6Zgw9fv+QeQzUGsLnyZjqqZ45+03nVKTzdGdZjHZBKs8mX1F\nsz9ilAuyOf0b0c2/hpTUXb9iZ1DRJQh518Yvh++ajdG2S64fq98jxFUiubLf\nUyX2\r\n=RXws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/typography":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.816a43b42.0_1586551991595_0.2979451489973921","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/slider","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e571c157297b4d38954fdcfefee5357cb6d48837","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.008c4d319.0.tgz","fileCount":36,"integrity":"sha512-dWAfYq1i28ufwPztsn8kyhXqDhZmaZ9Fsu5nMy1dqNwu+EVmPjMnvb5twNr7PXu+7qS07F9rHOe4ibGEBmmvTw==","signatures":[{"sig":"MEUCICD3Ef40v4tm2CVt/xFG+F2gBMnG0+U96Zir6vOJq6ANAiEA7yfyKr9qwnJb80YZuHhnTEpoOFXoX+XoaugFMZw8q+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSYCRA9TVsSAnZWagAAh/cP/RfEYqUzRMRV8lWNlbZ3\n+3PI1o01ZUclfgWWm1iGKfTOBCHVYmeBP1RTZC1ra7mXse+n8Ij7ili47iTb\nL8edi3kdR44nDTcLZX0VHDqGNnyhXyomU9VUXL2RDWzlut/dUcE6xl6xJcqb\nABH3OTVawbxqeo16Peb9FPcsyBw+Rc6uQpMpu2t7V9f4RN5hDLC1ArCd3vfx\n1HvGOYAfalSTGZzXpS8wH3EDGud90l6vWDMKVVUHarcFqLXXLKYQ78DBRvAC\n9OUIkx31YrnfRoxmD7eE3LYXSvny0KUJmnhlGFr0gssu/LjjMAxK4mNsbbWY\nA2loFf42+v6R2eCUE3qrXhNAXezwgVIs0YRXQC118LPJXiCAS/tTTTLTvx+P\nPN4JS8evH2KuCjNrcOTnURWt7gTuNbhU21zYAKdC6hQSNzjS3PWixX4RC6Yi\nRu6XdyeHBKLjUYkdfAyvANTLnOtDutepXEyx88+9/VlQZfFVg/ZIGC6aGj89\n9QpgZRw/T9jz0mUuVuMGgLpGA6XQ8NoSu4cpoT+p6FfJBJHOhvWPdcmuQu2R\nte4jXDPE8tAAa/27MDUL9YYffgbMn0eH8UPIbAmbvpSLjC8duiNzlKSpgP+F\nW0Y46o1B+tOBajzATzRc3V45h3x9vXzvS6uHM8ZCdcSECHlm3X0ZAonRaQCa\nwg5m\r\n=7OXK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/typography":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.008c4d319.0_1586795671519_0.013516793864669419","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/slider","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce072d51414deb4f363f3cf74aef2dd92f0ed339","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":36,"integrity":"sha512-D65Op4/jx0REGDjAdKds0j6JYsa2WjJKifcxdeJRKrARmEA7AK6CYmitXllxkJiGEtJGsIOdyBymEttYSSEUWA==","signatures":[{"sig":"MEQCIBaQ9IW89eqei3x0E40bL9H6QLSMKShSeIDPypghYyhsAiBSyQbHLAkUx5pYDTJe40+k7jxy2F3m4VcSrOQt3DutqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTSCRA9TVsSAnZWagAAAYwP/R8vxZ/J2DE+5gRT6dsL\nzsp9XmszRV19YBiFLA3GDoiQ8/SP3PEKATPTTzXZaKRfdPONBTGLK0LuaaKQ\nFQ9340pF0iMArB3ZQxvFVMa8yn8PIu6vErtyrMud11ICnhvddrqAnj49X6/l\n6VfPc01a4REgj1Vl00ZrcCfMdY8yt8uVyqwkf4HDZsiElnVZQZ/Ziqf0rPR0\nmUOHusMM67k7tlqTFtJZmDczGN/ikOYyOKik5qWL2nrmt3W819x+O0I+WYXB\nnxBOC9/7+FbWqpIXdWlRD9Y597eT45D+SLXtdH9+XaLwdTukusG9WAuDshDR\nPjX2OwI9Fa821dgOVmuPem9/9fOKWrJMUmsNFRWeBcyE6NzcbVqQDgPEzAr9\n1CcAMqZb6jsLT+aoGKmpyaHY+8HR7QtB9d3nbnhaeqqzu7P5dRq0x2tIpY6w\nYNI3QlteC8oH7QFe4mp3BirfmKpM2q7vFGZMByDAhFz1oKl8kYanv7TriTgt\nuRrf7XkBalCjpihJzSy74Ug/sgezDcLbmrHsrbyxFPnpyaeQSJrz2+qizJQM\npnUZtr6/uJuJaFW+Cfbv2xgoW6F7+9EEwW8Lf28iR4qWjkGa8FfoeQQlVRSx\niYryg6u14ixkQOlIZAshuuKdrVoysEPr7B4nKuOOatLRA3+/vSXb2oskjIJk\nrbLR\r\n=veuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/typography":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.cbb3f28ca.0_1586840786333_0.33499794460255283","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/slider","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c21bccde6b8e29d0e7f3eb4ed155c2983377b167","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.f172b0f90.0.tgz","fileCount":36,"integrity":"sha512-4n5XIH19jPgvq6ABG2Wh5IPoDiTuZYoCptLPrcpmMjAvgjaq2pzXO9Y+hQ7bR77v48Crc/LDjJ1CHViSmFGJ3A==","signatures":[{"sig":"MEQCIDqLz26pfXJ6QQYI32s+YH9f5ZwXQ2BaRrw2apHhFst9AiAziJqZF365UlXVAfZ2QwOtoGNvrJHaul3v0/mpOj1X8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkL7CRA9TVsSAnZWagAATpYQAIGKE6zQ1BmoRjxAas+Z\n2evUb/SNsH2oYRt7X1Hpa+rf4JWGUI2NdxSrZaKRrnpFCg8VnwQtESK0ODSk\nTd//7erlWWcPrkDQyBQ2XpPP74h74sUIdRCBUZUIJusv+VBlGxf/ZgnT0X2N\ngi7pvJ+vQANYmrhEZ94qyxG50d40CoK7SHWi+dw750fbmRRiQNoMoS1/SAC2\n57yLmFGddHrdAVyvhzfeBOO8PmswDmNlIovDgCGPy1t65ldVYykJ+LcQyIeT\npxLyvV1qebQ6uvf9V9+67y++BX9Z2mO5a2zd8rUV8uoBmGvtBm06IC1VUuEW\nvWGIN0sofoZuG5Uvjh6WhU1+uguou5dT7ToFczjtxag7t0ATDBA7FlZBIav6\nlC8fnDed/wD+S8KsCtObpo5qOUzSGti9eTKux8fI6kM+AnCnVGd+h56RYMnG\nLL18aBdmuBiMoVXri02xdWRVAZGeySTsxa9EaXMyOiLIzIfCMZQHV38pWyhj\nB+uNCyqPVY4cQiWDjrFR2xVX+Mh7R0qeFROmQIsjNYJdYYfB5wFPzTR1YlmO\ndWqcL8PfK61Je2txAydJ6b5ce8hiBpHkNUP3TwXAeC8DDR1MUWMEe/Db63LC\nE+xM2ZMqClzCcXqZBKVM4UctP6yTdyDREYTWmaZ6AM71RnCRADw0ti2P2BTo\n4PVY\r\n=UNF3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/typography":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.f172b0f90.0_1586905850599_0.7742097766813449","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/slider","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c64879dee36090c032ee074b1ef653201eac5344","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.c02642273.0.tgz","fileCount":36,"integrity":"sha512-xmPtNjQJsoY9s/QWTwv30XY1lx5SsNEMjzkpsV6ZT4nL8TmwYisCDtcAmWKRKEfWjcmsL2IZPOCIIN85HPYBlw==","signatures":[{"sig":"MEYCIQD5tMKpRkLoGXN8Nk31e3tK3wQ96mOIhfnVL61iZDCpOwIhAMq0ElckQvyX/VCYP5nPqPOcUV3y4xeOx9ZEl2NG84Hl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOyCRA9TVsSAnZWagAAvQ8P/1QgxQDH40T8zF/AuWwa\n9UwCmyi7j6upAEIDKu+ucICIiFCZvxQsn+K2V6pyLaCDPvOWScE1YyY5f7/X\nKI8pGQXIQOOS3IuXsXzbxQnpDu8wcDMfS1Vq6Gt1NAMDDrhG5q1Sv9Hk+O5e\njTIQ/QfE5iY/QTTkjeV0NOCG1ABHu+VToN8FFZXn1OWUXaLRyYHeVS9XN0na\nhCjfnMvRQh2M0ZTg7OkySnlnpY2Wgn8amxfDnLEItLlbMWD5q2GQ+Aq4yfvP\nKE8GYZH5iwjFgYfA6jlhDgy41BPDXrUw3aUtIfNw+xs/FHYYinPqznes9hWg\nQ8oErkWUo6TKfnP1zDR1kewtQ4NTF+9hmtU9k4ZuG9bQDg4dH1y7jeW3f6Ik\nK7st343Oq3cusY7UldemP62yP7yUQE/9eji27ox999+i+LSxa9f6IRafx2Iy\nWs1shMLt9EvVVaIkZVN60dov4GoR4lGqUUXYhOAQbNuUO6CWnmH6Sh8YBgAp\n2pMSD9QUMmjyR/wWHiqYp1WOkW/S2Ha/YNHLq5H55CbdoNqKKq64E3bACH3Y\nt3V7k7lh36TRsIrQe0LepAGMyAW4A50HCclTn3SUNNVjd0EZUuav/9sAyx8J\n15AlqShXXjAAV5zNapIpfBjMISy3cEPbNl28KJk+VxQCdVKjnH2SPEyB/syf\nrKQO\r\n=7m23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/typography":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.c02642273.0_1586967474243_0.9429376245669683","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/slider","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37c8541c63e7d957ca478587af75f65e8a855c88","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.8a299b568.0.tgz","fileCount":36,"integrity":"sha512-GxfLSEioKyiepYSDA2mAf7mDwsuDVb2LPzOkIIABBK8GTSZwpyANmKNtKr//Q3juy5jLngb4aB3cZagwjdYHAA==","signatures":[{"sig":"MEYCIQDPrUQTNUWxmZZ1kkdKCRiorkBvYsx0nRm8c6x10CyCMAIhANP2JI0d+7ud0SfXrmeEhznFV5D5GKLbkJiw7AIBHCCH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44hCRA9TVsSAnZWagAA+7IP+QA3R1J36V408Lh7bBft\nQEBnALNmjDQ0IFTnSmlVF8kHcoVIvOsUWjrzWBiwn4tcu1qM/p36G17EMlLD\nfApl4xVVmCoDUV4W/XSPMuD1KbHkW2tY38P7LjPpSi2OfAYk5lgRAv5tKqRo\ndEp0iEs+bpOHBG+nfAOe+it9SKAohWZfaF8NO1kuXk8TYeP/W0PZ4/HlyzYU\nL6IBq+N6VttsgzFfjNYFEuiSuViJeDbpV7yYaLmmxMk+aSKewIBRi8k/q/J1\nUykNceNC9IDXq0ViBQBQ1tGbhi2oBliGCRuoH9VlUncNfvT1DOz/3IYL0AQB\n0NY/a99n+idY3MDcHRSN4hRxHvsf/6sHMhiwA26rFAkoxE0NhHxuOCdIiNPB\n5qdo/PjqnKN/kKmp1O1oBUtPixcLfKJ6DdAgc1zqv7bWXiKn7ez+Nk8y+JeU\nJMze4QQ+25QC9CB3gAJWBVAVjQBamFP2PbdNlfxWiR5le2pTi+5dbj2mmdH/\n+iv0Z7hkRYGjTx9UdCJS5UZJFarFoCJ1+uJMg460B0l1Piaud6n3GeoXSlyn\naabUE+AYxFiOa7kztpGI7oCjwi4CdklJSgJWWyPYvw4r80He+i9nhBwxVCW1\nTcU+UYEFFf/frL96beakAn38IKVO8DRxYgcUdcdeMfnPVlpWzz93TQri4WHU\nZruO\r\n=FlxB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n
\n```\n\nThen in JS\n\n```js\nimport {MDCSlider} from '@material/slider';\n\nconst slider = new MDCSlider(document.querySelector('.mdc-slider'));\nslider.listen('MDCSlider:change', () => console.log(`Value changed to ${slider.value}`));\n```\n\nYou can also include MDCSlider via its UMD version located at `dist/mdc.slider[.min].js`\n\n```js\n// CommonJS\nconst {MDCSlider} = require('@material/slider/dist/mdc.slider');\n\n// AMD\nrequire(['/path/to/@material/slider/dist/mdc.slider'], ({MDCSlider}) => {\n // Use MDCSlider\n});\n\n// Global\nconst {MDCSlider} = mdc.slider;\n```\n\n### Initializing the slider with custom ranges/values\n\nWhen `MDCSlider` is initialized, it reads the element's `aria-valuemin`, `aria-valuemax`, and\n`aria-valuenow` values if present and uses them to set the component's `min`, `max`, and `value`\nproperties. This means you can use these attributes to set these values for the slider within the\nDOM.\n\n```html\n
\n \n
\n```\n\n### Using a step value\n\n> **NOTE**: If a slider contains a step value it does _not_ mean that the slider is a \"discrete\"\n> slider. \"Discrete slider\" is a UX treatment, while having a step value is behavioral.\n\n`MDCSlider` supports quantization by allowing users to supply a floating-point `step` value via a\n`data-step` attribute.\n\n```html\n
\n \n
\n```\n\nWhen a step value is given, the slider will quantize all values to match that step value, _except_\nfor the minimum and maximum values, which can always be set. This is to ensure consistent behavior.\n\nThe step value can be any positive floating-point number, or `0`. When the step value is `0`, the\nslider is considered to not have any step. A error will be thrown if you are trying to set step\nvalue to be a negative number.\n\nDiscrete sliders are required to have a positive step value other than 0. If a step value of 0 is\nprovided, or no value is provided, the step value will default to 1.\n\n### Display tracker markers (discrete slider only)\n\nDiscrete sliders support display markers on their tracks by adding the `mdc-slider--display-markers`\nmodifier class to `mdc-slider`, and `` to the\ntrack container.\n\n```html\n
\n
\n \n \n
\n \n
\n```\n\n> **NOTE**: When the provided step is indivisible to distance between max and min,\n> we place the second to last marker proportionally at where thumb could reach and\n> place the last marker at max value.\n\n### Disabled sliders\n\nAdding an `aria-disabled` attribute to a slider will initially disable it.\n\n```html\n
\n \n
\n```\n\n### MDC Slider Component API\n\nThe `MDCSlider` API is modeled after the `` element and supports a subset of the\nproperties that element supports. It also emits events equivalent to a range input's `input` and\n`change` events.\n\n#### Properties\n\n| Property Name | Type | Description |\n| --- | --- | --- |\n| `value` | `number` | The current value of the slider. Changing this will update the slider's value. |\n| `min` | `number` | The minimum value a slider can have. Values set programmatically will be clamped to this minimum value. Changing this property will update the slider's value if it is lower than the new minimum |\n| `max` | `number` | The maximum value a slider can have. Values set programmatically will be clamped to this maximum value. Changing this property will update the slider's value if it is greater than the new maximum |\n| `step` | `number` | Specifies the increments at which a slider value can be set. Can be any positive number, or `0` for no step. Changing this property will update the slider's value to be quantized along the new step increments |\n| `disabled` | `boolean` | Whether or not the slider is disabled |\n\n#### Methods\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Recomputes the dimensions and re-lays out the component. This should be called if the dimensions of the slider itself or any of its parent elements change programmatically (it is called automatically on resize). |\n| `stepUp(amount = 1) => void` | Increases the slider value by the given `amount`, or `1` if no amount is given |\n| `stepDown(amount = 1) => void` | Decrease the slider value by the given `amount`, or `1` if no amount is given |\n\n#### Events\n\n`MDCSlider` emits a `MDCSlider:input` custom event from its root element whenever the slider value\nis changed by way of a user event, e.g. when a user is dragging the slider or changing the value\nusing the arrow keys. The `detail` property of the event is set to the slider instance that was\naffected.\n\n`MDCSlider` emits a `MDCSlider:change` custom event from its root element whenever the slider value\nis changed _and committed_ by way of a user event, e.g. when a user stops dragging the slider or\nchanges the value using the arrow keys. The `detail` property of the event is set to the slider\ninstance that was affected.\n\n### Using the foundation class\n\nThe `@material/slider` package ships with an `MDCSliderFoundation` class that framework authors can\nuse to build a custom MDCSlider component for their framework.\n\n#### Adapter API\n\n| Method Signature | Description |\n| --- | --- |\n| `hasClass(className: string) => boolean` | Checks if `className` exists on the root element |\n| `addClass(className: string) => void` | Adds a class `className` to the root element |\n| `removeClass(className: string) => void` | Removes a class `className` from the root element |\n| `getAttribute(name: string) => string?` | Returns the value of the attribute `name` on the root element, or `null` if that attribute is not present on the root element. |\n| `setAttribute(name: string, value: string) => void` | Sets an attribute `name` to the value `value` on the root element. |\n| `removeAttribute(name: string) => void` | Removes an attribute `name` from the root element |\n| `computeBoundingRect() => ClientRect` | Computes and returns the bounding client rect for the root element. Our implementations calls `getBoundingClientRect()` for this. |\n| `getTabIndex() => number` | Returns the value of the `tabIndex` property on the root element |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's root element |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's root element |\n| `registerThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the slider's thumb container element |\n| `deregisterThumbContainerInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the slider's thumb container element |\n| `registerBodyInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the `` element of the slider's document |\n| `deregisterBodyInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` from the `` element of the slider's document |\n| `registerResizeHandler(handler: EventListener) => void` | Adds an event listener `handler` that is called when the component's viewport resizes, e.g. `window.onresize`. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Removes an event listener `handler` that was attached via `registerResizeHandler`. |\n| `notifyInput() => void` | Broadcasts an \"input\" event notifying clients that the slider's value is currently being changed. The implementation should choose to pass along any relevant information pertaining to this event. In our case we pass along the instance of the component for which the event is triggered for. |\n| `notifyChange() => void` | Broadcasts a \"change\" event notifying clients that a change to the slider's value has been committed by the user. Similar guidance applies here as for `notifyInput()`. |\n| `setThumbContainerStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the thumb container element. |\n| `setTrackStyleProperty(propertyName: string, value: string) => void` | Sets a dash-cased style property `propertyName` to the given `value` on the track element. |\n| `setMarkerValue(value: number) => void` | Sets pin value marker's value when discrete slider thumb moves. |\n| `setTrackMarkers(step: number, max: number, min: number) => void` | Sets track markers background style on track container. |\n| `isRTL() => boolean` | True if the slider is within an RTL context, false otherwise. |\n\n#### MDCSliderFoundation API\n\n| Method Signature | Description |\n| --- | --- |\n| `layout() => void` | Same as layout() detailed within the component methods table. Does the majority of the work; the component's layout method simply proxies to this. |\n| `getValue() => number` | Returns the current value of the slider |\n| `setValue(value: number) => void` | Sets the current value of the slider |\n| `getMax() => number` | Returns the max value the slider can have |\n| `setMax(max: number) => void` | Sets the max value the slider can have |\n| `getMin() => number` | Returns the min value the slider can have |\n| `setMin(min: number) => number` | Sets the min value the slider can have |\n| `getStep() => number` | Returns the step value of the slider |\n| `setStep(step: number) => void` | Sets the step value of the slider |\n| `isDisabled() => boolean` | Returns whether or not the slider is disabled |\n| `setDisabled(disabled: boolean) => void` | Disables the slider when given true, enables it otherwise. |\n| `setupTrackMarker() => void` | Put correct number of markers in track for discrete slider that display track markers. No-op if it doesn't meet those criteria. |\n\n### Theming\n\nBy default, all thematic elements of sliders make use of the **secondary theme color**.\n\n#### Sass Mixins\n\nThe following mixins apply only to _enabled_ sliders.\nIt is not currently possible to customize the color of a _disabled_ slider.\n\nMixin | Description\n--- | ---\n`color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin\n`highlight-color($color)` | Sets the color of the highlighted (aka \"on\") portion of the slider\n`rail-color($color, $opacity)` | Sets the color (and optionally the opacity) of the rail\n`rail-tick-mark-color($color)` | Sets the color of the tick marks on the rail\n`thumb-color($color)` | Sets the color of the thumb (grab handle)\n`focus-halo-color($color)` | Sets the color of the focus halo\n`value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast\n`value-pin-fill-color($color)` | Sets the fill color of the value indicator pin\n`value-pin-ink-color($color)` | Sets the ink color of the value indicator pin\n\n#### Setting the correct background color for disabled slider thumbs\n\nOne tricky issue with sliders is how the thumb is supposed to look when in the disabled state.\nIn this case, certain portions of the slider's thumb and track are supposed to\nbecome \"transparent\" and reveal the background color behind it. However, this presents a problem as\nthere is no elegant way to derive what the background color behind the slider should be. We could\ntheoretically walk up the DOM until we found an ancestor with a set background, but that would break\nthe component's encapsulation model.\n\nTo solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When\nused, this will override the default color used for the disabled state slider thumb and use\nthe color specified:\n\n```css\n.container {\n background: #fafafa;\n}\n\n.container > .mdc-slider {\n --mdc-slider-bg-color-behind-component: #fafafa;\n}\n```\n\n### Tips/Tricks\n\n#### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)\n\nBecause `MDCSlider` updates its UI based on the values it reads in when it is instantiated, there is\npotential for an incorrect first render before the script containing the `MDCSlider` initialization\nlogic executes. To avoid this, there are a few things you can attempt to do:\n\nIf you know how wide the slider will be at the time of instantiation, you can add an inline style\nto the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly\nby using similar logic to that within our code:\n\n1. Figure out the the percentage of length the thumb should have traveled across the track by\n computing `(value - min) / (max - min)`. We'll call this `pctComplete`.\n1. Compute the amount the slider thumb container by multiplying the width of the slider element by\n `pctComplete`. We'll call this `translatePx`. Note that if you're using the slider in an RTL\n content, modify `translatePx` such that `translatePx = -\n translatePx`.\n1. Set the `transform` style on `mdc-slider__thumb-container` to `translateX(${translatePx}px)\n translateX(-50%)`.\n1. Set the `transform` style on `mdc-slider__track` to `scale(pctComplete)`.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-slider"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web slider component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/typography":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/slider_6.0.0-canary.8a299b568.0_1586990624751_0.41087892254978886","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/slider","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","slider"],"license":"MIT","_id":"@material/slider@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2489969baae2f791fc977737622dc61b99b0b234","tarball":"https://registry.npmjs.org/@material/slider/-/slider-6.0.0-canary.490fbdc09.0.tgz","fileCount":36,"integrity":"sha512-hz2BabXDI8cjc3k36PzICMMWTa7L5iZCfnb/1Q/DocUDLmKd1JXQrMisb9CQrSwcWhkHirFe4hSerm7aSbm0sA==","signatures":[{"sig":"MEYCIQDYYs9+PsPSNvo8LxcHKtUOd3YwCW1AdGL/V6Vc0gSeUQIhAM1EvLa6bh/lSVGd7L/SvjBbRwkM5d/gK0ZFzrhiY+0B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RrCRA9TVsSAnZWagAAAbEP/j1VXGpIj70HuC3GleRG\nmsDY+NosxdQvyXAr+dR5C8qSRK/FHu50zvpHlwQGm9UTVdkFmF1MwwMXtX+w\no2QzSew5szcx9oXBLnfejm0GYtpblkePJNBkTDRQMF+UmDDywxSndh3zgcip\nVxOaqUxdfPctHutZ90yxmjFSTR9+SFPrIpiM5LCgDDkGnI87v4cwLlgGpURF\ncvrdg6Vsj6WlPrVqHuss40buYNCL9zYgJ9vXMstw95e9Py6wmOAVTHHHD9IK\ndWcZxjCpQ0vdhQSu9T267Xl5iToJ4JvZAfPGAFn2XO+u8m7ats3lXtkZZ253\nQBXD+qopAlb/WHVWOT6FSDQMzlT/J3GTbCzm6m4BfV08DGBrJF447oXDjWR7\n/Vpdtz0mCeO4ec0AFQJfIRB+xGsCF7FlgDWwEDISLjTaOpTkzO6BCIYFAwLP\nJ6rdFvaDPSi8jEZ/SLld/ip80CwXdCsK5lDR1BmipH9BClk7/qX+YnCRwsYi\n46hBL/e6YfCZVF+2khTfIfOpIjOewLJZ/xnIsXuRLmV9d7XJ8pQtK3Yz/Oj9\nyOLSBTpolhrp5CVc1k8sm5rGfQBHNp9hfHWePjWy1ThGp3FrxqUkX8/9saSF\n9yX8RgRt7uLhUxb2omp25/GLxSvw9sh+sb35X8s/TjMYnIts8NWHgm7H8lQd\nX+/l\r\n=1rqp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.slider.js","types":"dist/mdc.slider.d.ts","module":"index.js","readme":"\n\n# Slider\n\n\n\nMDC Slider provides an implementation of the Material Design slider component. It is modeled after\nthe browser's `` element. Sliders are fully RTL-aware, and conform to the\nWAI-ARIA [slider authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#slider).\n\nNote that **vertical sliders and range (multi-thumb) sliders are not supported, due to their absence\nfrom the material design spec**.\n\nAlso note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the\nslider's motion across the track, as well as the color of the tick marks. Thus, there may be some\ntreatments which deviate from the mocks. These deviations arose out of design feedback from seeing\nsliders used on the web, and thus have been endorsed by the Material Design team.\n\n## Design and API Documentation\n\n